Prebunding error: Could not resolve "ReactDOM" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)

[ujjwalbishnoi]

Describe the bug

Added react-chat-widget as dependency. error during prebundling: Could not resolve "ReactDOM" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)

System Info

vite version: 2.3.7 Operating System: Mac OS Bug Sur version 11.1 Node version: 14.15.4 package manger: yarn

Debug log

vite:config bundled config file loaded in 154ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'react-refresh', vite:config 'vite:dynamic-import-polyfill', vite:config 'vite:resolve', vite:config 'vite:html', vite:config 'vite:css', vite:config 'vite:esbuild', vite:config 'vite:json', vite:config 'vite:wasm', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:client-inject', vite:config 'vite:import-analysis' vite:config ], vite:config define: { vite:config 'process.env': { vite:config REACT_APP_VERSION: '4.46.3', vite:config REACT_APP_NAME: 'web-react', vite:config REACT_APP_TESTWA: true vite:config }, vite:config REACT_APP_NAME: '"web-react"' vite:config }, vite:config server: { vite:config https: true, vite:config fsServe: { vite:config root: '/Users/ujjwalbishnoi/Documents/practice/vite', vite:config strict: false vite:config } vite:config }, vite:config configFile: '/Users/ujjwalbishnoi/Documents/practice/vite/vite.config.js', vite:config configFileDependencies: [ 'package.json', 'vite.config.js' ], vite:config inlineConfig: { vite:config root: undefined, vite:config base: undefined, vite:config mode: undefined, vite:config configFile: undefined, vite:config logLevel: undefined, vite:config clearScreen: undefined, vite:config server: {} vite:config }, vite:config root: '/Users/ujjwalbishnoi/Documents/practice/vite', vite:config base: '/', vite:config resolve: { dedupe: undefined, alias: [ [Object] ] }, vite:config publicDir: '/Users/ujjwalbishnoi/Documents/practice/vite/public', vite:config cacheDir: '/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/.vite', vite:config command: 'serve', vite:config mode: 'development', vite:config isProduction: false, vite:config build: { vite:config target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ], vite:config polyfillDynamicImport: false, vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: {}, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config minify: 'terser', vite:config terserOptions: {}, vite:config cleanCssOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config brotliSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null vite:config }, vite:config env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false }, vite:config assetsInclude: [Function: assetsInclude], vite:config logger: { vite:config hasWarned: false, vite:config info: [Function: info], vite:config warn: [Function: warn], vite:config warnOnce: [Function: warnOnce], vite:config error: [Function: error], vite:config clearScreen: [Function: clearScreen] vite:config }, vite:config createResolver: [Function: createResolver], vite:config optimizeDeps: { esbuildOptions: { keepNames: undefined } } vite:config } +5ms vite:deps Crawling dependencies using entries: vite:deps /Users/ujjwalbishnoi/Documents/practice/vite/index.html +0ms vite:resolve 0ms /src/main.jsx -> /Users/ujjwalbishnoi/Documents/practice/vite/src/main.jsx +0ms vite:resolve 4ms react -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react/index.js +6ms vite:resolve 1ms react-dom -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react-dom/index.js +2ms vite:resolve 1ms ./App -> /Users/ujjwalbishnoi/Documents/practice/vite/src/App.jsx +2ms vite:resolve 2ms react-chat-widget -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react-chat-widget/lib/index.js +3ms vite:deps Scan completed in 51ms: { react: '/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react/index.js', 'react-dom': '/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react-dom/index.js', 'react-chat-widget': '/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react-chat-widget/lib/index.js' } +32ms Pre-bundling dependencies: react react-dom react-chat-widget (this will be run only when your dependencies or config have changed) vite:resolve 0ms object-assign -> null +0ms vite:resolve 1ms object-assign -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/object-assign/index.js +0ms vite:resolve 0ms React -> null +15ms vite:resolve 2ms React -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/react/index.js +15ms vite:resolve 0ms ReactDOM -> null +5ms vite:resolve 1ms ReactDOM -> null +3ms

node_modules/react-chat-widget/lib/index.js:1:272: error: Could not resolve "ReactDOM" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time) 1 │ ...xports?exports["react-chat-widget"]=t(require("React"),require("ReactDOM")):e["react-chat-widget"]=t(e[void 0],e[void 0])}(window,functi... ╵ ~~

vite:resolve 0ms scheduler -> null +22ms vite:resolve 1ms scheduler -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/scheduler/index.js +22ms vite:resolve 0ms scheduler/tracing -> null +1ms vite:resolve 0ms scheduler/tracing -> /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/scheduler/tracing.js +1ms error when starting dev server: Error: Build failed with 1 error: node_modules/react-chat-widget/lib/index.js:1:272: error: Could not resolve "ReactDOM" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time) at failureErrorWithLog (/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:1449:15) at /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:1131:28 at runOnEndCallbacks (/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:921:63) at buildResponseToResult (/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:1129:7) at /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:1236:14 at /Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:609:9 at handleIncomingPacket (/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:706:9) at Socket.readFromStdout (/Users/ujjwalbishnoi/Documents/practice/vite/node_modules/esbuild/lib/main.js:576:7) at Socket.emit (events.js:315:20) at addChunk (internal/streams/readable.js:309:12)

[github-actions[bot]]

Hello @ujjwalbishnoi. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[ujjwalbishnoi]

https://codesandbox.io/s/react-vite-forked-6k4h2

[haoqunjiang]

I think it's due to the misconfiguration in react-chat-widget's webpack externals.

[haoqunjiang]

https://github.com/Wolox/react-chat-widget/blob/49a5ba0178762222c0b5f2d802f5b99a0ef00688/webpack.config.prod.js#L81-L90

Why would they assign the name React to commonjs externals?