“导入”和“导出”可能仅出现在顶层

webpack Webpack

Green留姬

2020-03-11

我正在将webpack与vuejs一起使用。Webpack做它的事情,但是当我查看输出的app.js文件时,它给了我这个错误。

“导入”和“导出”可能仅出现在顶层

我假设babel无法转换代码是个问题?因为在查看应用程序时会在浏览器中找到它。

意外的令牌导入

这是我的vuejs应用程序的entry.js:

/*jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
require('./css/style.scss');

// Export the vue router
export var router = new VueRouter({
  hashbang: false,
  root: '/'
  // history: true
});

// Set up routing and match routes to components
router.map({
  '/': {
    component: require('./components/home/Home.vue')
  }
});

// Redirect to the home route if any routes are unmatched
router.redirect({
  '*': '/'
});

// Start the app on the #app div
router.start(App, '#app');

这是我的webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  entry: './src/entry.js',
  output: {
      filename: './public/js/app.js'
  },
  devtool: 'source-map',
  plugins: [
    new ExtractTextPlugin('./public/css/style.css')
  ],
  module: {
    preLoaders: [{
        test: /\.js$/, 
        exclude: /node_modules/,
        loader: 'jshint-loader'
    }],
    loaders: [{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style',
            'css!sass'
        ),
    },
    {
        test: /\.vue$/,
        loader: 'vue'
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        include: [
          path.resolve(__dirname, "src/services"),
        ],
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
    }]
  }
};

这是我的packages.json文件:

{
  "name": "test-webpack",
  "version": "1.0.0",
  "description": "Myapp",
  "main": "entry.js",
  "scripts": {
    "watch": "webpack-dev-server  --host $IP --port $PORT  --hot --inline --config webpack.config.js",
    "dev": "webpack",
    "build": ""
  },
  "author": "Dev",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.10.2",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "jshint": "^2.9.2",
    "jshint-loader": "^0.8.3",
    "node-sass": "^3.8.0",
    "path": "^0.12.7",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "vue": "^1.0.25",
    "vue-router": "^0.7.13"
  }
}

第666篇《“导入”和“导出”可能仅出现在顶层》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
Near十三 2020.03.11

也许您缺少一些插件,请尝试:

npm i --save-dev babel-plugin-transform-vue-jsx

npm i --save-dev babel-plugin-transform-runtime

npm i --save-dev babel-plugin-syntax-dynamic-import
  • 如果使用“ Webpack.config.js”:

缺少插件

  • 如果使用“ .babelrc”,请参阅此链接中的答案
Jim老丝L 2020.03.11

我不知道如何以不同的方式解决这个问题,但这很简单。加载程序Babel应放置在数组的开头,一切正常。

西门樱Eva 2020.03.11

Vue支持async components

来源:https : //vueschool.io/articles/vuejs-tutorials/async-vuejs-components/

<script>
export default {
  data: () => ({ show: false }),
  components: {
    Tooltip: () => import("./Tooltip")
  }
};
</script>

祝好运...

泡芙Pro 2020.03.11

我在组件方法中缺少右括号时收到此错误:

const Whoops = props => {
  const wonk = () => {props.wonk();      // <- note missing } brace!
  return (
    <View onPress={wonk} />
  )
}
JimJim 2020.03.11

升级到webpack 4.29.x后出现此错误。事实证明,webpack 4.29.x触发了npm的peerDependency错误根据他们的说法,该错误不会很快得到修复。这里的解决方法sokra

  • 添加"acorn": "^6.0.5"到您的应用程序package.json。
  • 切换到yarn它没有这个错误。
  • npm update acorn --depth 20 npm dedupe (仅在某些情况下有效)
  • rm package-lock.json npm i (仅在某些情况下有效)
  • 更新所有其他依赖较旧版本的橡子包(仅在某些情况下有效)
  • 将webpack锁定4.28.4在package.json中

更新资料

根据下面的评论,此错误在4.36.0之后不再存在

猿小宇宙小哥 2020.03.11

{{还要注意是否出现双尖括号语法错误,这可能导致出现此错误消息

Mandy小卤蛋凯 2020.03.11

确保您有一个.babelrc文件,该文件声明了Babel应该进行的编译。我花了30分钟的时间来弄清楚这个确切的错误。将一堆文件复制到新文件夹后,发现我没有复制.babelrc文件,因为它是隐藏的。

{
  "presets": "es2015"
}

或类似的东西就是您在.babelrc文件中寻找的东西

宝儿前端 2020.03.11

我在使用webpack4时遇到了同样的问题,我在根文件夹中缺少.babelrc文件:

{
    "presets":["env", "react"],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

从package.json:

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android