nuxt
@vitejs/plugin-legacy does not build
Environment
- Operating System:
Linux - Node Version:
v16.14.2 - Nuxt Version:
3.0.0-rc.8 - Package Manager:
[email protected] - Builder:
vite - User Config:
vite - Runtime Modules:
- - Build Modules:
-
Reproduction
https://stackblitz.com/edit/github-qzrpnn?file=nuxt.config.ts
Describe the bug
When adding the Vite plugin @vitejs/plugin-legacy and trying to build using nuxt build I get an error.
The error does not happen when using a clean Vite project, so I guess it is related to Nuxt.
Additional context
No response
Logs
ERROR [vite:terser] _require2 is not defined 11:12:21
ERROR [vite:legacy-generate-polyfill-chunk] _require2 is not defined 11:12:21
ERROR _require2 is not defined 11:12:21
at doWork (eval at __global_eval__ (https://github-qzrpnn.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:8:32190), <anonymous>:5:20)
at _0x51acfb.eval (eval at __global_eval__ (https://github-qzrpnn.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:8:32190), <anonymous>:12:21)
at [nodejs.internal.kHybridDispatch] (https://github-qzrpnn.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:353083)
at t.emitMessage (https://github-qzrpnn.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:1031392)
at _started.<computed>._source.<computed> (https://github-qzrpnn.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:15:103757)
This is caused by the following code, inlined in @vite/legacy-vue:
const makeWorker = () => new Worker_1(async (terserPath, code, options) => {
// test fails when using `import`. maybe related: https://github.com/nodejs/node/issues/43205
// eslint-disable-next-line no-restricted-globals -- this function runs inside cjs
const terser = require(terserPath);
return terser.minify(code, options);
});
The problem is that jiti, which transpiles nuxt.config and anything used within it, is mangling require(terserPath) => require2(terserPath) because this is an ES module and Babel doesn't understand that this is meant to run within a CJS context.
How to solve it?
A temporary hack
- const terser = require(terserPath);
+ const terser = eval('require')(terserPath);
Locate the line and do a codemod yourself, persist it with patch-package if you must to. By make the require not an Identifier, thus the babel won't touch it.
But I think there are more to fix. The script tag in html didn't seem to be generated correctly. The type is 'module' even it is a systemjs module instead of esm. And the entry runs before polyfill so the 'System' variable is not found. (Did one of nuxt plugin reordered them?)
hi
i install with yarn add --dev terser. seen this errors:
Nuxt 3.0.0-rc.13 with Nitro 0.6.1 19:36:50
ERROR [vite:terser] _require2 is not defined 19:37:18
ERROR [vite:legacy-generate-polyfill-chunk] _require2 is not defined 19:37:18
ERROR _require2 is not defined
next remove node_module dir and lock file, but again error!
After testing, this issue doesn't replicate in latest nuxt (3.2.2). The project can be built and ran successfully with @vitejs/plugin-legacy. I can see the legacy scripts included in the browser
Raising this error in the console
here's reproduction: https://stackblitz.com/edit/github-8lcbw5?file=nuxt.config.ts
npm run build && node .output/server/index.mjs
update: found a related issue here https://github.com/nuxt/nuxt/issues/15464 this one should be closed