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 and I have tried all the commonJS options and plugins and nothing seems to fix it.

Please let me know!

[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,
    }),
  ],
});`
```