'import'和'export'只能出现在顶层

Question

我正在使用webpack和vuejs。Webpack正在执行它的任务，但当我查看输出的app.js文件时，出现了这个错误。

'import' 和 'export' 只能出现在顶层

我猜想这是babel没有将代码转换的问题吗？因为当我查看应用程序时，在浏览器中出现了“Unexpected token import”的错误。

这是我的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"
  }
}

- Jayson H

---

https://dev59.com/o1kT5IYBdhLWcg3wB7PP - chetan pawar

Answer 1

我遇到了一个错误，因为我缺少了一个闭合括号。

简化重现：

const foo = () => {
  return (
    'bar'
  );
}; <== this bracket was missing

export default foo;

- lukeaus

---

在90%的情况下，这个答案可能是正确的。请检查你的开闭括号！ - easwee

根据 https://github.com/webpack/webpack/issues/8656?_pjax=%23js-repo-pjax-container#issuecomment-512843419 的说法，这个问题已经在“webpack”:“4.36.0”中得到修复。 - Michael Freidgeim

简直不敢相信这么微不足道的事情会给我带来这么多的头疼。 - KMA Badshah

Answer 2

'import'和'export'只能出现在顶层，这意味着webpack正在绑定未经转译的ES6代码，这就是为什么会找到这些'import'/'export'语句。因此，'babel-loader'可能没有转译您期望的内容。如果您只删除其加载器配置中的'inclue'和'exclue'规则，则将启用除'node_modules'之外的所有内容的默认行为进行转译。由于某种原因，当前的规则导致跳过了一些/全部文件。

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$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  }
};

- Jacob

---

我已经安装了babel loader，配置如下：module.loaders = [{ test : /\.(js|jsx)$/, exclude : /node_modules/, loader : 'babel', query : { cacheDirectory : true, plugins : ['transform-runtime', 'transform-async-to-generator'], presets : ['latest', 'react', 'stage-0'] } }]但是它仍然无法正确编译文件，抛出与此处提到的相同错误。还可能有什么其他问题？ - boldnik

我不熟悉 latest 或 stage-0，但你是否尝试将 es2015 添加到 presets 中？ - Jacob

Answer 3

在组件方法中，当我缺少闭合括号时，就会遇到这个错误:

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

- duhaime

Answer 4

确保你有一个声明了Babel应该转换什么的 .babelrc 文件。我花了大约30分钟来解决这个确切的错误。之后，我将一堆文件复制到新文件夹中，并发现我没有复制 .babelrc 文件，因为它是隐藏的。

{
  "presets": "es2015"
}

或者类似这样的内容是你在 .babelrc 文件中正在寻找的

- Ace

Answer 5

我曾经遇到过使用 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",

- Bastien

---

我使用了与你类似的配置，代码已经编译通过，但在IE11中出现了SCRIPT28和SCRIPT2343错误。 - Naveen

Answer 6

使用webpack 4.14.0和babel-cli 6.26时，我不得不安装这个Babel插件来修复“SyntaxError：'import'和'export'只能出现在顶层”的错误：babel-plugin-syntax-dynamic-import。这个链接是从Webpack Code Splitting Docs引入的。

- Jon Higgins

Answer 7

请注意双重开括号语法错误{{，它可能导致出现此错误消息。

- Eric Knudtson

Answer 8

我在升级到webpack 4.29.x后遇到了这个错误。原来webpack 4.29.x触发了npm的同级依赖问题peerDependency bug。根据他们的说法，这个问题不会很快得到解决。这里是sokra提供的解决方法。

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

更新

根据下面的评论，此bug在4.36.0之后已不存在

- paibamboo

---

根据 https://github.com/webpack/webpack/issues/8656?_pjax=%23js-repo-pjax-container#issuecomment-512843419 ，该问题已在 "webpack": "4.36.0" 中修复。 - Michael Freidgeim

Answer 9

这虽然不是对原问题的直接回答，但我希望这些建议可以帮助那些遇到类似错误的人：

当使用新版Web-API与Webpack+Babel进行转译时，如果出现以下错误信息： “Module parse failed: 'import' and 'export' may only appear at the top level”，那么你可能忘记导入polyfill。

例如：当使用fetch() API并针对es2015版本时，你应该：

1. 在package.json中添加whatwg-fetch polyfill； 2. 添加import { fetch } from 'whatwg-fetch'。

- Kiran Mohan

---

Babel仅为ECMAScript方法（在https://tc39.github.io/ecma262/中定义）添加polyfill。 由于fetch是由Web规范（https://fetch.spec.whatwg.org/）定义的，因此您需要自己添加polyfill。 - InsOp

Answer 10

我的错误是由一个 System.import('xxx.js') 语句引起的。将其替换为 import xxx from 'xxx.js' 后，错误得到解决。

我认为这是因为 require('xxx.scss') 也导致了动态导入。

对于问题描述中的情况，在我看来，动态导入并不是必要的，所以问题应该通过仅将所有的 require 替换为 import ... from ... 来解决。

对于一些必须使用动态导入的情况，你可能需要 @babel/plugin-syntax-dynamic-import，就像本问题中的其他答案一样。

- Marco Ng