-
Notifications
You must be signed in to change notification settings - Fork 249
Description
Description
When migrating a Next.js Pages Router project to vinext, vinext dev fails with 500 Internal Server Error because Vite 8's ESModulesEvaluator cannot handle CommonJS dependencies that use module.exports.
Reproduction
- A Next.js project with common CJS dependencies (e.g.
react-i18next→html-parse-stringify→void-elements, orhighlight.js) - Run
npx vinext initthennpx vinext dev - Visit
http://localhost:3000/
Error
Error when evaluating SSR module /src/pages/index.tsx: module is not defined
at eval (node_modules/void-elements/index.js:8:1)
at ESModulesEvaluator.runInlinedModule (vite/dist/node/module-runner.js:988:161)
ReferenceError: module is not defined
at node_modules/void-elements/index.js:6:1
After externaling void-elements, the same error occurs for highlight.js/lib/core.js, and so on for other CJS-only packages.
Attempted workarounds
| Config | Result |
|---|---|
ssr.noExternal: ['void-elements', ...] |
Same error, CJS not transformed |
ssr.noExternal: true |
Same error |
ssr.external: ['void-elements', ...] |
Fixes that package, but next CJS dep fails (whack-a-mole) |
ssr.external: true |
Even react itself gets externalized and fails |
ssr.external: [/node_modules/] |
Vite 8 rejects RegExp: Value is non of these types True, Array<T> |
Root cause
Vite 8's ESModulesEvaluator (used by SSRCompatModuleRunner) runs module code in strict ESM scope where module is not defined. CJS packages that use module.exports = ... fail immediately. Vite's CJS→ESM transform doesn't seem to kick in
for these dependencies during SSR dev.
Environment
- Node.js: v22.22.1
- vinext: 0.0.31
- Vite: 8.0.1
- Package manager: pnpm 10.32.1
- OS: macOS (darwin-arm64)
Affected packages (partial list)
void-elements(viareact-i18next→html-parse-stringify)highlight.jsreactitself (react/index.jsusesmodule.exports)- Many others — most npm packages still ship CJS
Expected behavior
vinext should handle CJS dependencies transparently in SSR dev mode, similar to how Next.js webpack does.