Вопрос:

«импорт» и «экспорт» могут появляться только на верхнем уровне

webpack vue.js babeljs

67064 просмотра

13 ответа

549 Репутация автора

Я использую веб-пакет с vuejs. Webpack делает свое дело, но когда я смотрю на выходной файл app.js, он выдает мне эту ошибку.

«импорт» и «экспорт» могут появляться только на верхнем уровне

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

Неожиданный импорт токенов

Вот мой entry.js для моего приложения vuejs:

/*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 Источник Размещён: 19.06.2016 12:30

Ответы (13)


11 плюса

57889 Репутация автора

Решение

«импорт» и «экспорт» могут появляться только на верхнем уровне

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

Если вы просто удалите includeи excludeправила из своего загрузчика конфигурации, поведение по умолчанию transpiling все , кроме того, что это в 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 Размещён: 11.08.2016 04:20

10 плюса

134 Репутация автора

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

{
  "presets": "es2015"
}

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

Автор: Ace Размещён: 15.02.2017 08:48

0 плюса

771 Репутация автора

Я использую Webpack 2.2.0 для комплектации своих модулей React JS.

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

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

Тщательно заметить? символ в тестовом запросе RegEx.

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

У меня это сработало !!

Автор: rach8garg Размещён: 20.03.2017 09:07

82 плюса

4586 Репутация автора

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

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

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

export default foo;
Автор: lukeaus Размещён: 11.08.2017 02:56

0 плюса

1 Репутация автора

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

Автор: Kirill Размещён: 14.09.2017 06:31

3 плюса

973 Репутация автора

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

Автор: Eric Knudtson Размещён: 15.01.2018 06:41

4 плюса

146 Репутация автора

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

Он был связан с документами Web Pack Code Splitting .

Автор: Jon Higgins Размещён: 04.07.2018 07:00

4 плюса

368 Репутация автора

У меня была та же проблема с использованием 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 Размещён: 13.08.2018 08:48

1 плюс

11 Репутация автора

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

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

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

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

Автор: Marco Ng Размещён: 12.11.2018 04:09

4 плюса

1651 Репутация автора

Я получил эту ошибку после обновления до webpack 4.29.x. Оказалось, что WebPack 4.29.x вызвало НПМ 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
Автор: paibamboo Размещён: 21.02.2019 04:06

0 плюса

7662 Репутация автора

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

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

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

Удачи...

Автор: Akash Размещён: 16.04.2019 02:33

0 плюса

1 Репутация автора

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

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", смотрите ответ в этой ссылке .
Автор: LuuSean Размещён: 20.06.2019 07:43

0 плюса

1120 Репутация автора

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

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

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

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

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

  1. добавить whatwg-fetchpolyfill в package.json
  2. добавлять import {fetch} from 'whatwg-fetch'
Автор: Kiran Mohan Размещён: 11.08.2019 07:38
Вопросы из категории :
32x32