Error on npm run serve for default 3.x template

[MatthewCushing]

Version

4.5.13

Reproduction link

https://github.com/MatthewCushing/vue-issue-reproduction/tree/master/starter-project-issue

Environment info

System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.1.0 - ~/.nvm/versions/node/v14.1.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.1.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/compiler-core:  3.1.3
    @vue/compiler-dom:  3.1.3
    @vue/compiler-sfc: ^3.0.0 => 3.1.3
    @vue/compiler-ssr:  3.1.3
    @vue/component-compiler-utils:  3.2.2
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.1.3
    @vue/runtime-core:  3.1.3
    @vue/runtime-dom:  3.1.3
    @vue/shared:  3.1.3
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0 => 7.12.1
    vue: ^3.0.0 => 3.1.3
    vue-eslint-parser:  7.7.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.7 (16.3.0)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 4.5.13

Steps to reproduce

1. vue create starter-project
2. Select option 2 - Default (Vue 3) ([Vue 3], babel, eslint)
3. cd starter-project
4. npm run serve

What is expected?

To be able to run the default template without modifying anything.

What is actually happening?

I receive this error:

ERROR  Failed to compile with 1 error                                                              6:33:48 PM

 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.7.98:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

---

If I manually create project and give it the addition of TypeScript, it works fine. Without TypeScript, it results in this error.

EDIT: This now happens with all options with TypeScript as well. Not sure if something changed in the last 2 hours?

[minikiller]

I also have same situation in this morning.

[ThatNerdUKnow]

Same here, The issue only seems to affect the vue 3 template. The Vue 2 template works fine

[HermitSun]

Same too. I stuck on this, and could not start a new project. I think I should roll back to 2.x temporarily😅

[BABA983]

2.x work fine but 3.x Manually select features get the same error

[sun948534670]

Same to

[MatthewCushing]

Ya, I've been looking up how to compile, bundle, and run Vue 3.x but not having any luck as a newb to Vue. Feel like I'm spending too much time trying to resolve that issue compared to moving back to 2.x temporarily. Just don't want to have to relearn and rewrite bunch in order to move back up to 3.x (this is for work and will need to be in 3.x when PR is submitted). Not to mention, the tutorial(s) I've been following have all been for 3.x so I'm going to have to dig back for 2.x tutorials now. I'll give 2.x a shot. Thanks for the replies and support to get this issue moving everyone.

[sun948534670]

npm uninstall vue
npm install vue@3.1.2

[sun948534670]

I rollback the version of Vue,And It Worked

[minikiller]

@sun948534670 what is Vue last version, My vue cli version is 4.5.13

[sun948534670]

@sun948534670 what is Vue last version, My vue cli version is 4.5.13

What's your Vue version? (Not the vue-cli Version)

[HermitSun]

@minikiller Maybe we should update the version of the package vue instead of vue-cli.

[HermitSun]

@sun948534670 The version of Vue is 3.0.0 when created by latest vue-cli.

[sun948534670]

@sun948534670 The version of Vue is 3.0.0 when created by latest vue-cli.

都是国人用中国话吧。我今天早晨把Vue版本升级到了3.1.3然后出现了这个问题。然后我尝试回滚了我的Vue版本到3.1.2然后就可以正常编译了

[MatthewCushing]

npm uninstall vue
npm install vue@3.1.2

Thanks for the workaround! Not sure why I didn't think of that.

[HermitSun]

@sun948534670 主要是为了让外国人能看懂😅我早上起来新建了个项目，结果运行不了，用新版脚手架创建的项目默认的Vue版本是3.0.0，我试了一下，3.1.2可以，3.1.3又不行了。不排除是新版本有什么奇怪的改动。

[sun948534670]

@sun948534670 主要是为了让外国人能看懂😅我早上起来新建了个项目，结果运行不了，用新版脚手架创建的项目默认的Vue版本是3.0.0，我试了一下，3.1.2可以，3.1.3又不行了。不排除是新版本有什么奇怪的改动。

用3.1.2吧~

[HermitSun]

@sun948534670 主要是为了让外国人能看懂😅我早上起来新建了个项目，结果运行不了，用新版脚手架创建的项目默认的Vue版本是3.0.0，我试了一下，3.1.2可以，3.1.3又不行了。不排除是新版本有什么奇怪的改动。

用3.1.2吧~

确实，谢谢。另外请忽略我上一条消息，我最近有点星际玩家的意思😅

[geraldalvarez]

npm uninstall vue
npm install vue@3.1.2

Had similar problem, and doing these commands fixed the issue.

[haoqunjiang]

Workaround:

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

[exeptionerror]

[Solved] Module parse failed: Unexpected token (763:13) in VueJs