Uncaught ReferenceError: require is not defined while doing preview of react using vite preview

Question

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 command 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-commonjs like -

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

// 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

Answer 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-commonjs'

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