v3.2.34 build error

[Sunshop]

Link to minimal reproduction

https://v3.cn.vuejs.org/

Steps to reproduce

升级 vue 3.2.34 打包错误

What is expected?

打包成功

What is actually happening?

ERROR SyntaxError: Unexpected token '.'
/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:3198
if (grandparent?.source) {
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/root/Spug/AIOps-Arti/spug_api/repos/251_12426_20220519180730/node_modules/@vue/compiler-core/index.js:4:20)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! micro-app-good-manager@1.0.0 build: vue-cli-service build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the micro-app-good-manager@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-05-19T10_09_12_108Z-debug.log
Error: npm run build failed

System Info

vue: 3.234
node: 12.22.8

Any additional comments?

暂无

[liulinboyi]

请提供更详细的信息。

[Sunshop]

请提供更详细的信息。

使用nvm切换node版本，12.22.8，然后请顺序执行
npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run build

[Sunshop]

请提供更详细的信息。

使用nvm切换node版本，12.22.8，然后请顺序执行 npm init vite@latest my-vue-app --template vue cd my-vue-app npm install npm run build

[vite:vue] Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
error during build:
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
at resolveCompiler (D:\project\de\node_modules@vitejs\plugin-vue\dist\index.js:3955:11)
at Object.buildStart (D:\project\de\node_modules@vitejs\plugin-vue\dist\index.js:4686:46)
at D:\project\de\node_modules\rollup\dist\shared\rollup.js:23034:37
at async Promise.all (index 4)
at async D:\project\de\node_modules\rollup\dist\shared\rollup.js:23828:13
at async catchUnfinishedHookActions (D:\project\de\node_modules\rollup\dist\shared\rollup.js:23338:20)
at async rollupInternal (D:\project\de\node_modules\rollup\dist\shared\rollup.js:23826:5)
at async doBuild (D:\project\de\node_modules\vite\dist\node\chunks\dep-59dc6e00.js:41402:24)
at async build (D:\project\de\node_modules\vite\dist\node\chunks\dep-59dc6e00.js:41244:16)
at async CAC. (D:\project\de\node_modules\vite\dist\node\cli.js:738:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! de@0.0.0 build: vite build

[Sunshop]

请提供更详细的信息。

使用nvm切换node版本，12.22.8，然后请顺序执行 npm init vite@latest my-vue-app --template vue cd my-vue-app npm install npm run build

使用 vue 3.2.33 版本无此问题

[liulinboyi]

我看了看，是因为这个build: output es2020 (target node 14+) for cjs/server builds，从v3.2.34-beta.1开始，编译产物就是es2020了，需要node版本node 14+。

[liulinboyi]

请提供更详细的信息。

使用nvm切换node版本，12.22.8，然后请顺序执行 npm init vite@latest my-vue-app --template vue cd my-vue-app npm install npm run build

使用 vue 3.2.33 版本无此问题

解决办法就是升级node版本到14+。

[mbrodala]

Can you please keep everything in English so that others also understand what is discussed here?

In any case I can confirm the issue.

[liulinboyi]

Can you please keep everything in English so that others also understand what is discussed here?

In any case I can confirm the issue.

Starting with v3.2.34-beta.1, the compiled product is es2020, which requires node version node 14+ and uses new javascript features such as ?..

The solution is to upgrade the node version to 14+.

Related commit build: output es2020 (target node 14+) for cjs/server builds.

[mbrodala]

Hm, but we do use Node 14 already:

$ node --version
v14.18.2

Is there a specific minor/patch version required for this?

[mbrodala]

Ah sorry, just noticed that the project with this error indeed uses Node 12. I'll retry after updating to Node 14 here.

[Sunshop]

我看了看，是因为这个build: output es2020 (target node 14+) for cjs/server builds，从v3.2.34-beta.1开始，编译产物就是es2020了，需要node版本node 14+。

但是 官方是 >=12 就可以噻

[mbrodala]

Final update: yes, the update fixed it. 😅

[liulinboyi]

我看了看，是因为这个build: output es2020 (target node 14+) for cjs/server builds，从v3.2.34-beta.1开始，编译产物就是es2020了，需要node版本node 14+。

但是 官方是 >=12 就可以噻

Vite docs
Vite 文档

[Sunshop]

Final update: yes, the update fixed it. 😅

nice

[alex116]

how can I use npm-shrinkwrap to keep it at 3.2.33? I am building node in buildroot but this part updated even though I thought I had npm-shrinkwrap keep everything at the current version.

[yyx990803]

The target is now es2019 which should run in Node 12, however note that Node 12 is now end of life and you should upgrade to 14+ anyway.

[Sunshop]

The target is now es2019 which should run in Node 12, however note that Node 12 is now end of life and you should upgrade to 14+ anyway.

tks

[alex116]

@yyx990803 we want to have reproducible builds for our embedded system that builds node in docker and then uses that binary node to build the web interface. How can we be independent of this forced upgrade and continue to use node 12 in the future? I am trying to use package lock/shrinkwrap but this mishap just completely destroyed our build-cycle and disrupted our build system.

[yyx990803]

@alex116 it should already be fixed in 3.2.35, upgrading should make it work. But you should not be using Node 12 in the future anyway.

[alex116]

@yyx990803 We have a buildroot system that we are using today with buildroot 2020 and it came with node 12. If I deliver this system to a customer in an embedded system and they have an issue, I want to reproduce this exact build that they have on their system without having to resort to newer software. If I use gcc-5 to create a binary, then in 5 years I will still be able to use gcc-5 to build this program.
With node things seem more difficult because I am being told I need to upgrade all the time but this is not a good idea because we want "reproducible builds".
Telling me to upgrade does not bring me closer to my goal.

[yyx990803]

That's not my suggestion - it's how Node.js release works. Every year there will be a major version of Node going end of life, keeping it up to date is a security best practice. If you deliver a system with end of life components to your customer, you are knowingly exposing them to security risks.

Either way, Vue 3 will continue to work with Node 12 and breakage was unintentional.

[alex116]

If you deliver a system with end of life components to your customer, you are knowingly exposing them to security risks.

If I build up to date software today and put it on an embedded device, and deliver it to a customer, then in 5 years it will be outdated. This is obvious. It's also completely besides the point I'm trying to convey. Think of it like your routers landing page. It doesn't get updated all the time does it? Is it a security concern? Probably usually not because it's usually only your local network (there are exceptions).

To my goal:
If a customer has an issue with that software, I need to be able to reproduce that build exactly the way they have it, in order to debug it.
If my npm-shrinkwrap.json has vue in it, its sub-dependencies/submodules are still updating every time I do an npm install.
This is undesired because I don't want it to fix issues that it had in the compiler behind the scenes, I want it to show me the exact code that the customer has so that I can reproduce their error. If I then realize that upgrading node will fix the issue, that's fine. A key concern is reproducibility of errors customers face in order to take their issue serious.

Is there a proposed best way to nail this version down to not upgrade or do I have to go through it manually and add every dependency by hand?