I am using vite version 3.0.0 inside the react project with @vitejs/plugin-react version 2.0.0.

vite.conf.js -

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

// /config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
})

When I try to preview the website using vite preview mand I get following error -

Uncaught ReferenceError: require is not defined at index.aef3ad2c.js:346:199702 at index.aef3ad2c.js:1:142 at index.aef3ad2c.js:368:141758

Further, when I try to view the error line I see -

I tried finding out which package is using crypto-js using npm list crypto-js it returns empty like -

I tried removing node_modules and re-installing packages several times but still it's not working!

I also tried using @originjs/vite-plugin-monjs like -

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {viteCommonjs, esbuildCommonjs} from '@originjs/vite-plugin-monjs'

// /config/
export default defineConfig({
  plugins: [viteCommonjs(), react()],
  build: {
    outDir: 'build',
  },
  esbuildOptions: {
    plugins: [esbuildCommonjs(['react-s3'])],
  },
})

Please help me find out the cause and possible turnaround!!!

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 3.31 GB / 15.79 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.16.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
  npmPackages:
    @vitejs/plugin-react: ^2.0.0 => 2.0.1
    vite: ^3.0.0 => 3.0.8

Used Package Manager

npm

I am using vite version 3.0.0 inside the react project with @vitejs/plugin-react version 2.0.0.

vite.conf.js -

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
})

When I try to preview the website using vite preview mand I get following error -

Uncaught ReferenceError: require is not defined at index.aef3ad2c.js:346:199702 at index.aef3ad2c.js:1:142 at index.aef3ad2c.js:368:141758

Further, when I try to view the error line I see -

I tried finding out which package is using crypto-js using npm list crypto-js it returns empty like -

I tried removing node_modules and re-installing packages several times but still it's not working!

I also tried using @originjs/vite-plugin-monjs like -

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {viteCommonjs, esbuildCommonjs} from '@originjs/vite-plugin-monjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [viteCommonjs(), react()],
  build: {
    outDir: 'build',
  },
  esbuildOptions: {
    plugins: [esbuildCommonjs(['react-s3'])],
  },
})

Please help me find out the cause and possible turnaround!!!

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 3.31 GB / 15.79 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.16.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
  npmPackages:
    @vitejs/plugin-react: ^2.0.0 => 2.0.1
    vite: ^3.0.0 => 3.0.8

Used Package Manager

npm

• javascript
• reactjs
• bundler
• vite

Share Improve this question Follow asked Aug 20, 2022 at 3:42 shubhamshubham 45711 gold badge99 silver badges1616 bronze badges 3

• I am facing the same problem when serving production build. – Ahsan Khan Commented Oct 6, 2022 at 15:59
• I am unable to find the solution. Please reply if you found one. For now, I reverted back to CRA!! – shubham Commented Oct 7, 2022 at 8:36
• also got the same issue – jkone27 Commented Nov 11, 2022 at 11:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

According to vite 3 esbuildOptions docs you need to wrap esbuildOptions with optimizeDeps and your config should look like this:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {viteCommonjs, esbuildCommonjs} from '@originjs/vite-plugin-monjs'

export default defineConfig({
  plugins: [viteCommonjs(), react()],
  build: {
    outDir: 'build',
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [esbuildCommonjs(['react-s3'])],
    },
  }
})

I also faced this problem then I found the solution by using Vite legacy plugin

@vitejs/plugin-legacy

example:

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
}