Ответ 1

"импорт" и "экспорт" могут отображаться только на верхнем уровне

Это означает, что webpack связывает незашифрованный ES6-код, поэтому эти операторы import/export находятся. babel-loader поэтому не должен транслировать то, что вы ожидаете.

Если вы просто удалите правила include и exclude из своей конфигурации загрузчика, поведение по умолчанию передается всем, кроме того, что происходит в 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']
      }
    }]
  }
};

Ответ 2

Я получил эту ошибку, когда мне не хватало закрывающей скобки.

Упрощенный отдых:

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

export default foo;

Ответ 3

Удостоверьтесь, что у вас есть файл.babelrc, который объявляет, что Бабель должен переводить. Я потратил 30 минут, пытаясь понять эту точную ошибку. После того, как я скопировал кучу файлов в новую папку и выяснил, что я не копировал файл.babelrc, потому что он был скрыт.

{
  "presets": "es2015"
}

или что-то в этом направлении - это то, что вы ищете внутри своего.babelrc файла

Ответ 4

С помощью webpack 4.14.0 и babel-cli 6.26 мне пришлось установить этот плагин Babel для исправления SyntaxError: 'import' and 'export' may only appear at the top level ошибке SyntaxError: 'import' and 'export' may only appear at the top level: babel-plugin-syntax-dynamic-import

Это было связано с документами для разделения кода Webpack.

Ответ 5

У меня была такая же проблема с помощью webpack4, я отсутствовал в файле.babelrc в корневой папке:

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

Из пакета.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",

Ответ 6

Я получил эту ошибку после обновления до webpack 4.29.x. Оказалось, что веб-пакет 4.29.x вызвал npm ошибку peerDependency. И согласно им, ошибка не будет исправлена в ближайшее время. Вот обходной путь от Сокра

• добавьте "acorn": "^6.0.5" в ваше приложение package.json.
• Переключитесь на yarn. У него нет этой ошибки.
• npm update acorn --depth 20 npm dedupe (работает только в некоторых случаях)
• rm package-lock.json npm i (работает только в некоторых случаях)
• обновите все остальные пакеты, которые зависят от более ранней версии для Acorn (работает только в некоторых случаях)
• заблокируйте веб-пакет в 4.28.4 в вашем package.json

Обновление

Согласно комментарию ниже, эта ошибка больше не существует после 4.36.0

Ответ 7

Также обратите внимание на синтаксическую ошибку с двойным открытием и {{ которая может вызвать появление этого сообщения об ошибке

Ответ 8

Моя ошибка вызвана System.import('xxx.js'). После замены на import xxx from 'xxx.js' ошибка решена.

Я думаю, это потому, что require('xxx.scss') также вызвал динамический импорт.

Для случая в описании вопроса, на мой взгляд, динамический импорт не является необходимым, поэтому проблему следует решить, просто заменив все require на import... from...

В некоторых случаях, когда требуется динамический импорт, вам может понадобиться @babel/plugin-syntax-dynamic-import как другие ответы в этом вопросе.

Ответ 9

Я использую Webpack 2.2.0 для связывания модулей React JS.

Обнаружена аналогичная проблема при импорте модулей в основной файл app.js.

После 30 минут headbanging я обновил RegEx для тестирования типов файлов в моем webpack.config.js.

Осторожно заметите? символ в тестовом запросе RegEx.

{
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'react-hot-loader'
}

Это сработало для меня!

Ответ 10

Я не знаю, как решить эту проблему по-другому, но это решается просто. Барабан загрузчика должен быть размещен в начале массива, и все работает.

Ответ 11

Vue поддерживает async components:

Источник: https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/

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

Удачи...

Ответ 12

Может быть, вам не хватает некоторых плагинов, попробуйте:

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", смотрите ответ в этой ссылке.

Ответ 13

Это не прямой ответ на первоначальный вопрос, но я надеюсь, что это предложение поможет кому-то с подобной ошибкой:

При использовании более нового веб-API с Webpack + Babel для переноса, и вы получаете

Module parse failed: 'import' and 'export' may only appear at the top level

тогда вы, вероятно, забыли импортировать полифилл.

Например:
при использовании fetch() api и таргетинга для es2015, вы должны

1. добавить полифилл whatwg-fetch в package.json
2. добавить import {fetch} from 'whatwg-fetch'