Using ssr.noExternal causes errors with the dev server

[gotgenes]

I'm using React Router as a...

framework

Reproduction

1. Start a new React Router framework project with

   npx create-react-router@latest a-react-router-app
   

2. Edit the vite.config.ts to use ssr.noExternal

   import { reactRouter } from "@react-router/dev/vite";
   import tailwindcss from "@tailwindcss/vite";
   import { defineConfig } from "vite";
   import tsconfigPaths from "vite-tsconfig-paths";
   
   export default defineConfig({
     plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
     ssr: { noExternal: true },
   });

3. Start the react-router dev server with npm run dev.

4. Visit http://localhost:5173/ in your browser.

5. Observe an error like the following in the browser:

   

6. Observe an error like the following in the console running npm run dev:

   ❯ npm run dev
   
   > dev
   > react-router dev
   
     ➜  Local:   http://localhost:5173/
     ➜  Network: use --host to expose
     ➜  press h + enter to show help
   4:20:04 PM [vite] Error when evaluating SSR module /node_modules/react/jsx-dev-runtime.js:
   |- ReferenceError: module is not defined
       at eval (/Users/chris/development/a-react-router-app/node_modules/react/jsx-dev-runtime.js:8:3)
       at instantiateModule (file:///Users/chris/development/a-react-router-app/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11)
   
   4:20:04 PM [vite] Error when evaluating SSR module /node_modules/@react-router/dev/dist/config/defaults/entry.server.node.tsx:
   |- ReferenceError: module is not defined
       at eval (/Users/chris/development/a-react-router-app/node_modules/react/jsx-dev-runtime.js:8:3)
       at instantiateModule (file:///Users/chris/development/a-react-router-app/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11)
   
   4:20:04 PM [vite] Error when evaluating SSR module virtual:react-router/server-build:
   |- ReferenceError: module is not defined
       at eval (/Users/chris/development/a-react-router-app/node_modules/react/jsx-dev-runtime.js:8:3)
       at instantiateModule (file:///Users/chris/development/a-react-router-app/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11)
   
   4:20:04 PM [vite] Internal server error: module is not defined
         at eval (/Users/chris/development/a-react-router-app/node_modules/react/jsx-dev-runtime.js:8:3)
         at instantiateModule (file:///Users/chris/development/a-react-router-app/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:11)
   

I have also hit similar errors when excluding any one of the following packages listed as dependencies in package.json

• @react-router/node
• react
• react-dom
• react-router

For example, uncomment one of the following lines in the vite.config.ts file:

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  ssr: {
    noExternal: [
      //Uncomment any one of these below and the dev server will fail to render
      // "@react-router/node",
      // "react",
      // "react-dom",
      // "react-router",
    ],
  },
});

I have also tried excluding the node builtins, and still had no success.

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { builtinModules } from "node:module";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  ssr: {
    noExternal: [
      //Uncomment any one of these below and the dev server will fail to render
      // "@react-router/node",
      // "react",
      // "react-dom",
      // "react-router",
    ],
    external: [...builtinModules],
  },
});

System Info

System:
    OS: macOS 15.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 166.94 MB / 16.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 20.18.3 - ~/.local/share/asdf/installs/nodejs/20.18.3/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.local/share/asdf/installs/nodejs/20.18.3/bin/npm
    pnpm: 10.4.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 18.3
  npmPackages:
    @react-router/dev: ^7.2.0 => 7.2.0
    @react-router/node: ^7.2.0 => 7.2.0
    @react-router/serve: ^7.2.0 => 7.2.0
    react-router: ^7.2.0 => 7.2.0
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

I expected the dev server to continue to render the starter page.

Actual Behavior

The starter page does not render and errors like described above appear in the browser and the console.

[timdorr]

Because of the way HMR works in dev mode, you can't use noExternal with the dev server. You either need to disable this conditionally based on NODE_ENV, or not use that option at all.

[gotgenes]

Thanks for your reply. I think I understand now that I need to use what Vite calls Conditional Config, like the following:

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(({ command }) => {
  return {
    plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
    ssr: command === "build" ? { noExternal: true } : {},
  };
});