vite: how to handle "require" statement in third-party module?

Question

I use an UI library which has "require" statement.

I can use vite to run development mode successfully.

but when I build and preview the dist, the browser fail: Uncaught ReferenceError: require is not defined, because there are some "require" statement in the vendor chunk.

I have tried @rollup/plugin-node-resolve, @originjs/vite-plugin-commonjs but it doesn't work.

How can I fix that ?

Answer 1

The transformMixedEsModules: true option worked for me.

Here is an example of vite.config.ts to handle third-party modules that use require statement for a React web app.

export default defineConfig({
  plugins: [react()],
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  }
})