viterollupcommonjs

"name" is not exported by "module" even when using @rollup/plugin-commonjs in vite (rollup) build


I'm migrating a react site from from CRA (webpack) to Vite (Rollup), and despite using the @rollup/plugin-commonjs addin in my vite config, (which did solve all of the name-is-not-exported-by-module errors in my direct imports, I still get them for the imports of my imports. For example, when I try vite build, it fails on react-router's import of parse from cookie. with this error message:

✗ Build failed in 11.17s
../common/temp/node_modules/.pnpm/react-router@7.6.2_react-dom@19.1.0+react@19.1.0/node_modules/react-router/dist/development/chunk-NL6KNZEE.mjs (9973:9): 
"parse" is not exported by "../common/temp/node_modules/.pnpm/cookie@1.0.2/node_modules/cookie/dist/index.js", 
imported by "../common/temp/node_modules/.pnpm/react-router@7.6.2_react-dom@19.1.0+react@19.1.0/node_modules/react-router/dist/development/chunk-NL6KNZEE.mjs".

It's worth noting that the error is being thrown when a 3rd party .mjs module (react-router) is importing another 3rd party commonjs module ("cookie").

It's also worth noting that this project is in a monorepo (hence, the ../common/temp/node_modules paths) and I'm using the commonjs({include: /node_modules/,}) configuration options as recommended by the Usage with Symlinks note

FWIW, my full vite.config.ts is:

import {reactRouter} from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import {defineConfig, searchForWorkspaceRoot} from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";

export default defineConfig({
  // https://stackoverflow.com/a/74902701/1519199
  server: {
    fs: {
      allow: [searchForWorkspaceRoot(process.cwd()), ".."],
    },
  },
  plugins: [
    commonjs({
      include: /node_modules/,
    }),
    resolve(),
    tailwindcss(),
    reactRouter(),
    tsconfigPaths(),
  ],
});

Solution

  • Turns out, Vite uses @rolllup/plugin-commonjs already and can be configured with build.comonjsOptions. Furthermore, since my Vite app depended on other projects in the monorepo, which was organized like this:

    ./package-A  
    ./package-B
    ./react-web-app
    

    and my react-web-app included them with workspace links (as in "dependencies": {"package-A":"workspace:*"}, the packages were linked to react-web-app with paths like ../package-A/ and not ../commmon/temp/node_modules/some-npm-dependency/, so in addition to the required /node_module/ pattern suggested in the Usage with Symlinks guide, I needed to include patterns for all the co-located dependencies explicitly. In the end, my vite.config.ts file looked like:

    import {reactRouter} from "@react-router/dev/vite";
    import tailwindcss from "@tailwindcss/vite";
    import {defineConfig, searchForWorkspaceRoot} from "vite";
    import tsconfigPaths from "vite-tsconfig-paths";
    import resolve from "@rollup/plugin-node-resolve";
    
    export default defineConfig({
      // https://stackoverflow.com/a/74902701/1519199
      server: {
        fs: {
          allow: [searchForWorkspaceRoot(process.cwd()), ".."],
        },
      },
      plugins: [
        resolve(),
        tailwindcss(),
        reactRouter(),
        tsconfigPaths(),
      ],
      build: {
        commonjsOptions: {
          include: [
            /node_modules/,
            /* Explicit patterns to include the co-located dependencies */
            /package-A/,
            /package-B/,
          ],
        },
      },
    });