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