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