@vitejs/plugin-legacy does not build

[andresespinosapc]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@7.17.0
• 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)

[danielroe]

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.

[WooHoo-Wu]

How to solve it?

[mmis1000]

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?)

[Binaryify]

any update?

[xtoolkit]

any update?

[xtoolkit]

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!

[jheng-jie]

Please take this issue seriously

[fahmifitu]

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 #15464 this one should be closed

[danielroe]

Great. Closing in favour of #15464.