Vue-loader语法错误：从js文件导入组件时出现意外的令牌

Question

I have a vue 2 project that was using webpack 2. I had abandoned it for a while and then returned to find several errors I thought might be related to old versions, so I upgraded to webpack 3, and updated vue-loader.

Now I seem to get an error Syntax Error: Unexpected token { every time I try to import a component into a js file.

For example:

import App from './App.vue'

from the main.js file gives me the error. Importing a component from within another vue component doesn't seem to give me any problems.

Also here is how I'm initializing the app in main.js. All of this worked previously.

new Vue({ router: router, store, el: '#app', render: h => h(App) })

I'm not sure if this is an issue with vue-loader or webpack configuration or a combination of both.

Here are my versions from package.json: "vue": "^2.5.2", "vue-resource": "^1.3.4", "vue-router": "^2.8.1", "vuex": "^2.2.1", "webpack": "^3.8.1", "webpack-bundle-analyzer": "^2.2.1", "webpack-dev-middleware": "^1.12.0", "webpack-hot-middleware": "^2.20.0", "webpack-merge": "^2.6.1", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-istanbul": "^3.1.2", "babel-plugin-lodash": "^3.2.11", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0",

Answer 1

尝试将npm升级到最新版本。