Need help with some dependencies

[vibaiher-qatium]

Hi!

I'm trying to migrate from CRA to Vite, but I'm a bit stucked with some external dependencies. One of them is shpjs: https://github.com/calvinmetcalf/shapefile-js.

When I run vite dev, I get TypeError: global is not defined from an internal shpjs dependency (lie library). If I add <script>window.global = window</script> to index.html, then I get TypeError: Buffer2 is undefined.

I have tried some rollup plugins but I haven't solved it. Could someone give me some ideas? I'm thinking on forking the library and remove all node dependencies to transpile it to a ES module, but I guess that there is some kind of combination of plugin + configuration that I don't know that solves this kind of problems

Sample repo is here: https://github.com/qatium/vite-react-ts-app

Thank you all!

[kengork]

We fixed it. We'll share how we make it work:

1. To fix TypeError: Buffer2 is undefined we had to create an alias in vite.config.js like this: ` Buffer: "buffer". Then we installed a library called "buffer" and we imported the module wherever we needed it. This way we made sure we were using a buffer that works in the browser.
2. After that we got an error rbush2 is not defined. It was related to one of our dependencies called @turf/line-split, as rbush was a dependency of this one. The cause of the error was that Vite wasn't compiling the require() inside of that library, because we're using ESM. So, we had to install a plugin called @originjs/vite-plugin-commonjs and target that dependency.

 optimizeDeps: {
    esbuildOptions: {
      plugins: [esbuildCommonjs(["rbush"])]
    }
  },

[CharlesLeocc]

I have encountered the same problem as you,and here are my solution:
1.In main.ts
import { Buffer } from 'buffer' if (typeof (window as any).global === 'undefined') { (window as any).global = window; } globalThis.Buffer = Buffer

[imjulianeral]

Thanks a lot for creating this discussion, but neither of the solutions provided were helpful for me, so, this is how I solved the problem:

import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [..., nodePolyfills()],
  server: { port: 3000 },
  ...
});

Just pnpm add -D vite-plugin-node-polyfills and add the plugin in the vite.config.ts file.

That's it. This solution worked for Vite 5.1.4.

[br0k3nb]

Thanks buddy, u helped a lot!