Vue 3.1.3 doesn't build with Vue CLI 4

[skirtles-code]

Version

3.1.3

Reproduction link

Just create a fresh project with Vue CLI 4.5.13 and the default Vue 3 preset.

Steps to reproduce

Multiple people have reported on Discord that creating a fresh project with Vue CLI 4.5.13 and Vue 3.1.3 fails. I have confirmed it myself. Rolling back to Vue 3.1.2 works fine.

vue create blah
cd blah
yarn serve

Yields error:

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                  06:55:35

 error  in ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js

Module parse failed: Unexpected token (763:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class RefImpl {
>     _rawValue;
|     _shallow;
|     _value;

 @ ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 1:0-233 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 16:4-17 40:4-17 107:13-18 108:32-37 115:16-21 1958:8-13 1962:13-23 1968:35-45 1970:16-21 1973:21-31 2071:19-25 2094:8-12 2135:8-13 2210:29-34 2557:27-30 2558:26-29 2559:28-31 2905:16-29 2912:16-29 3043:28-36 3362:41-56 3378:28-33 3463:8-15 3500:32-37 3647:27-32 3823:29-34 3951:12-25 3958:12-25 4568:17-22 4592:13-18 5173:26-32 5336:8-21 5340:8-21 5755:16-20 5761:12-16 6296:27-32 6328:12-19 6338:16-23 6356:93-100 6357:15-20 6767:60-75 6768:60-75 6769:60-75 6770:59-74 6847:16-21 6997:16-21 7150:21-28 7160:8-21 7161:134-149 7162:8-21 7210:30-39 7264:8-21 7266:8-21 7314:23-38 7334:46-55 7334:56-63 7389:14-24 7576:21-26 7586:21-31 7593:24-34 7596:21-31 7624:53-58 7630:52-57 7696:48-53
 @ ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
 @ ./node_modules/vue/dist/vue.runtime.esm-bundler.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.13:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

It seems the dist folders for 3.1.3 contain newer syntax that Vue CLI can't handle.

[bodograumann]

I think this only affects vue-cli-4. I have upgraded to vue-3.1.3 in the context of vue-cli-5.beta successfully.

[mdunisch]

same problem here,
works fine with vue@3.1.2 @vue/compiler-sfc@3.1.2 but breaks with vue@3.1.3 @vue/compiler-sfc@3.1.3

[skirtles-code]

Seems like the same issue reported against the CLI repo: vuejs/vue-cli#6562

[scuiadmin]

！same problem

[zhangyuang]

maybe it's caused by rollup
3.1.3

3.1.2

[sodatea]

Caused by a TypeScript version bump.
We should never set the target to esnext again.

Workaround:

// vue.config.js
module.exports = {
  transpileDependencies: ['@vue/reactivity']
}

[LonHon]

Resolved by locking Vue version to 3.1.2

[czl0325]

学习了！！！感谢！！！！

[BoBo-Git]

Caused by a TypeScript version bump.
We should never set the target to esnext again.

Workaround:

// vue.config.js
module.exports = {
  transpileDependencies: ['@vue/reactivity']
}

It works, and no need to lock Vue version to 3.1.2.

[yalcinyagizkorkmaz]

runtime-core.esm-bundler.js?d2dd:40 [Vue warn]: Failed to resolve component: router-link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at
warn @ runtime-core.esm-bundler.js?d2dd:40
runtime-core.esm-bundler.js?d2dd:40 [Vue warn]: Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at
warn @ runtime-core.esm-bundler.js?d2dd:40

I have a problem How do I solution this problem?