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

[ArnaudBarre]

The default template uses named export and this is not an issue.
Maybe this is because of the legacy plugin? or another plugin in your config. Try either removing them or starting from a fresh install, copy your src code in it and then try to add only the necessary parts to make it works, it can help you avoid bringing legacy from CRA

[anujshah108]

Thanks - I tried all the above including just porting over to a fresh install. Same error. Let me know if you have any other tips. Appreciate all the help nonetheless!

[ArnaudBarre]

Can you share start from https://vite.new/react-ts and the shortest possible number of line to repro the issue? I'm really surprised that you get issue for React itself

[anujshah108]

I was able to get this working by deleting all node_modules and then re-add each package one by one and then also simplify the vite config.

I have no idea what worked tbh but its working for now.

Thanks for all the help!

[ArnaudBarre]

Happy to see you've solved it and succeeded at reducing tech debt!