ReferenceError: require is not defined (for the ViteJS)

Question

My project is created using vitejs

However,

My problem is when I build my vite app and host to my server (remember it's namecheep hosting) then it's shows bellow issue.

ReferenceError: require is not defined
at index-a4df310d.js:682:57318
at Hu (index-a4df310d.js:345:20340)
at Tg (index-a4df310d.js:345:20798)
at Object.useState (index-a4df310d.js:345:27178)
at Ie.useState (index-a4df310d.js:9:6382)
at sie (index-a4df310d.js:682:57154)
at aie (index-a4df310d.js:682:58185)
at $y (index-a4df310d.js:345:19520)
at wm (index-a4df310d.js:347:3139)
at PP (index-a4df310d.js:347:44801)

If you want you can check out my tsconfig.json file.

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "allowJs": false,
         "skipLibCheck": true,
         "esModuleInterop": false,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "module": "ESNext",
         "moduleResolution": "Node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx"
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

And also this one is my vite.config.ts file code

import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Please anyone help me to fix this issue....

Somewhere you're using `require`. [However...](https://stackoverflow.com/a/19059825/1377002) — Andy, Mar 04 '23 at 19:19
Bro, this error shows only for a single (report create page), And I have checked once again. But there are no `require` Can you help to fix this issue... why it shows.. When I try to gose this page then it shows a fully blank white — Developer Sabbir, Mar 04 '23 at 19:43

score 0 · Answer 1 · answered Jul 17 '23 at 14:25

I was having the same issue and setting transformMixedEsModules property under commonjsOptions config fixed the problem.

///vite.config.ts

export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  build: {
    outDir: 'build',
    manifest: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  server: {
    open: true,
    port: 3005,
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    coverage: {
      reporter: ['text', 'html'],
      exclude: ['node_modules/', 'src/setupTests.ts'],
    },
  },
})

ReferenceError: require is not defined (for the ViteJS)

1 Answers1