"require is not defined" on the server, in dev mode only

[jakearchibald]

Describe the bug

jakearchibald/vite-srr-require-bug-demo@332d0ae - here's a reduced example of the issue, building on top of the Preact SSR template.

Here I'm using a plugin to import a module for SSR only. In this case, JSDOM. pnpm run build && pnpm run preview works fine. However, if I visit the app in pnpm run dev, I get the error ReferenceError: require is not defined.

Reproduction

jakearchibald/vite-srr-require-bug-demo@332d0ae

Steps to reproduce

1. Check out https://github.com/jakearchibald/vite-srr-require-bug-demo/ and install dependencies.
2. pnpm run dev
3. Visit the server in a browser
4. See ReferenceError: require is not defined
5. Note that replacing step 2 with pnpm run build && pnpm run preview works fine.

System Info

System:
    OS: macOS 15.3.2
    CPU: (12) arm64 Apple M4 Pro
    Memory: 1.96 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.7.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 10.4.1 - /opt/homebrew/bin/pnpm
    Watchman: 2025.02.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 134.0.6998.89
    Chrome Canary: 136.0.7075.0
    Safari: 18.3.1
  npmPackages:
    vite: ^6.1.1 => 6.2.2

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

The error of "require is not defined" is happening because Vite does not support processing CJS modules. By externalizing the module, it should work. But it seems resolving by Vite + externalizing the module (returning { id: resolveId, external: true } in resolveId hook) does not work. Probably this is related to #19461.

As a workaround you can change the virtual module to be a facade module by tweaking the plugin to be like:

const p = {
  name: 'server-only-module',
  async resolveId(id, importer, {ssr}) {
    const prefix = 'server-only:';

    if (id.startsWith(prefix)) {
      if (ssr) return id
      return '\0empty-module';
    }
  },
  load(id) {
    if (id === '\0empty-module') return 'export {}';
    const prefix = 'server-only:';
    if (id.startsWith(prefix)) {
      return `export * from ${JSON.stringify(id.slice(prefix.length))}`
    }
  },
}

[jakearchibald]

Ohhh thank you! If you have time, can you explain a bit about why that workaround works?

[sapphi-red]

It's because dependencies are externalized by default. Vite knows that jsdom is a dependency, on the other hand, Vite doesn't know that server-only:jsdom is a dependency. By returning export * from "jsdom", it goes through Vite's internal logic without involving plugins.

[jakearchibald]

Perfect, thank you