CommonJS issue with Styled Components on Build

[anujshah108]

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, when I start the app it works perfect and I have tried all the commonJS options and plugins and nothing seems to fix it.

Please let me know!

My Vite Config:

`import { sentryVitePlugin } from "@sentry/vite-plugin";
import nodePolyfills from "rollup-plugin-node-polyfills";
import macrosPlugin from "vite-plugin-babel-macros";
import react from "@vitejs/plugin-react";
import babel from "vite-plugin-babel";
import checker from "vite-plugin-checker";
import legacy from "@vitejs/plugin-legacy";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import { defineConfig } from "vitest/config";

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    "process.env": {},
    globalThis: "window",
    global: "globalThis",
  },
  optimizeDeps: {
    include: ["linked-dep", "styled-components", "react-is"],
  },
  

  // 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: false,
      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