vue-cli: Error on npm run serve for default 3.x template

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?

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 12
  • Comments: 21 (1 by maintainers)

Most upvoted comments

npm uninstall vue npm install vue@3.1.2

I also have same situation in this morning.

Workaround:

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

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

用3.1.2吧~

I rollback the version of Vue,And It Worked

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.