CommonJS issue with Styled Components on Build

[anujshah108]

Describe the bug

Hi all -

I am getting an issue when building my app that I recently converted from CRA to VITE.

error during build: node_modules/styled-components/dist/styled-components.browser.esm.js (1:9): "typeOf" is not exported by "node_modules/react-is/index.js", imported by "node_modules/styled-components/dist/styled-components.browser.esm.js".

This only happens on build and I have tried all the commonJS options and plugins and nothing seems to fix it.

Please let me know!

Reproduction

Cannot deploy

Steps to reproduce

cannot deploy unfortunetly

System Info

node 20.6.1

Used Package Manager

npm

Logs

`error during build:
node_modules/styled-components/dist/styled-components.browser.esm.js (1:9): "typeOf" is not exported by "node_modules/react-is/index.js", imported by "node_modules/styled-components/dist/styled-components.browser.esm.js".
file: /Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/styled-components/dist/styled-components.browser.esm.js:1:9

1: import{typeOf as e,isElement as t,isValidElementType as n}from"react-is";import r,{useState as o,useContext as s,useM...
^
2: //# sourceMappingURL=styled-components.browser.esm.js.map

at getRollupError (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
at error (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/parseAst.js:392:42)
at Module.error (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:15588:16)
at Module.traceVariable (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:16037:29)
at ModuleScope.findVariable (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:13820:39)
at ChildScope.findVariable (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:5283:38)
at FunctionScope.findVariable (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:5283:38)
at FunctionBodyScope.findVariable (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:5283:38)
at Identifier.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:5066:40)
at CallExpression.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2653:23)
at CallExpression.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:11284:15)
at UnaryExpression.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2653:23)
at LogicalExpression.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2653:23)
at ReturnStatement.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2653:23)
at BlockStatement.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2649:28)
at FunctionExpression.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2653:23)
at VariableDeclarator.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2653:23)
at VariableDeclaration.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2649:28)
at Program.bind (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2649:28)
at Module.bindReferences (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:15567:18)
at Graph.sortModules (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21096:20)
at Graph.build (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:20999:14)
at async file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21687:13
at async catchUnfinishedHookActions (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21153:16)
at async rollupInternal (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21682:5)
at async build (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65443:14)
at async CAC.<anonymous> (file:///Users/ashah/Desktop/bto_repos/bto_sample_management/node_modules/vite/dist/node/cli.js:828:5)`

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[anujshah108]

This is my vite.config.ts:

`export default defineConfig({
define: {
"process.env": {},
globalThis: "window",
global: "globalThis",
},
optimizeDeps: {
include: ["linked-dep"],
},
resolve: {
alias: {
// This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
// see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
// process and buffer are excluded because already managed
// by node-globals-polyfill
util: "rollup-plugin-node-polyfills/polyfills/util",
sys: "util",
events: "rollup-plugin-node-polyfills/polyfills/events",
stream: "rollup-plugin-node-polyfills/polyfills/stream",
path: "rollup-plugin-node-polyfills/polyfills/path",
querystring: "rollup-plugin-node-polyfills/polyfills/qs",
punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
url: "rollup-plugin-node-polyfills/polyfills/url",
string_decoder: "rollup-plugin-node-polyfills/polyfills/string-decoder",
http: "rollup-plugin-node-polyfills/polyfills/http",
https: "rollup-plugin-node-polyfills/polyfills/http",
dwt: "rollup-plugin-node-polyfills/polyfills/os",
assert: "rollup-plugin-node-polyfills/polyfills/assert",
constants: "rollup-plugin-node-polyfills/polyfills/constants",
_stream_duplex:
"rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
_stream_passthrough:
"rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
_stream_readable:
"rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
_stream_writable:
"rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
_stream_transform:
"rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
timers: "rollup-plugin-node-polyfills/polyfills/timers",
console: "rollup-plugin-node-polyfills/polyfills/console",
vm: "rollup-plugin-node-polyfills/polyfills/vm",
zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
tty: "rollup-plugin-node-polyfills/polyfills/tty",
domain: "rollup-plugin-node-polyfills/polyfills/domain",
},
},

// This changes the out put dir from dist to build
// comment this out if that isn't relevant for your project
build: {
outDir: "build",
sourcemap: true,
commonjsOptions: {
include: [/linked-dep/, /node_modules/],
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ["react"],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
react: "React",
},
},
},
},
test: {
globals: true,
environment: "jsdom",
setupFiles: "./setupTest.ts",
// you might want to disable it, if you don't have tests that rely on CSS
// since parsing CSS is slow
css: true,
},

plugins: [
legacy({
targets: [
"chrome >= 64",
"edge >= 79",
"safari >= 11.1",
"firefox >= 67",
],
renderLegacyChunks: false,
modernPolyfills: ["es/global-this"],
}),
react({
babel: {
plugins: ["styled-components"],
babelrc: false,
configFile: false,
},
}),
checker({
typescript: true,
eslint: {
lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
},
}),
macrosPlugin(),
// eslint(),
nodePolyfills(),
NodeGlobalsPolyfillPlugin(),
NodeModulesPolyfillPlugin(),
babel({
babelConfig: {
babelrc: false,
compact: false,
configFile: false,
},
}),
sentryVitePlugin({
org: "billion-to-one",
project: "patient-portal-frontend",
authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
}),
],
});`

[anujshah108]

solved by adding to react-is to external roll-up options