web-dev-qa-db-ja.com

「インポート」と「エクスポート」はトップレベルでのみ表示されます

私はvuejsでwebpackを使用しています。 Webpackはその機能を果たしますが、出力されたapp.jsファイルを見ると、このエラーが発生します。

「インポート」と「エクスポート」はトップレベルでのみ表示されます

私はそれがバベルがコードを変換しないという問題だと仮定していますか？アプリケーションを表示するときにブラウザでこれを取得しているからです。

予期しないトークンのインポート

これは私の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"
  }
}
webpackvue.jsbabeljs
35
Jayson H

「インポート」と「エクスポート」はトップレベルでのみ表示されます

これは、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']
      }
    }]
  }
};
11
Jacob

閉じかっこがないとこのエラーが発生しました。

簡素化されたレクリエーション：

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

export default foo;
86
lukeaus

Babelがトランスコンパイルすることになっているものを宣言する.babelrcファイルがあることを確認してください。この正確なエラーを把握しようとして30分ほど費やしました。大量のファイルを新しいフォルダーにコピーして、.babelrcファイルが非表示だったためコピーしなかったことがわかりました。

{
  "presets": "es2015"
}

またはそれらの行に沿った何かが、.babelrcファイル内で探しているものです

10
Ace

Webpack 4.14.0とbabel-cli 6.26を使用して、SyntaxError: 'import' and 'export' may only appear at the top levelエラーを修正するためにこのBabelプラグインをインストールする必要がありました： babel-plugin-syntax-dynamic-import

Webpack Code Splitting Docs からリンクされていました。

4
Jon Higgins

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",
4
Bastien

Webpack 4.29.xへのアップグレード後にこのエラーが発生しました。 webpack 4.29.xがnpmの peerDependencyバグ をトリガーしたことが判明しました。そして、彼らによると、バグはすぐには修正されないでしょう。 回避策 from ソクラ

  • "acorn": "^6.0.5"をアプリケーションpackage.jsonに追加します。
  • yarnに切り替えます。このバグはありません。
  • npm update acorn --depth 20npm dedupe（一部の場合にのみ機能します）
  • rm package-lock.jsonnpm i（一部の場合にのみ機能します）
  • acornの古いバージョンに依存する他のすべてのパッケージを更新します（場合によってのみ機能します）
  • package.jsonの4.28.4でwebpackをロックします
4
paibamboo

このエラーメッセージが表示される原因となる可能性のある{{の二重開始ブラケット構文エラーにも注意してください

3
Eric Knudtson

私のエラーはSystem.import('xxx.js')文によって引き起こされます。 import xxx from 'xxx.js'に置き換えた後、エラーは解決しました。

require('xxx.scss')も動的インポートを引き起こしたためだと思います。

質問の説明の場合、私の意見では、動的インポートは必要ないため、すべてのrequiresをimport ... from ...に置き換えるだけで問題を解決する必要があります。

動的インポートが必要な場合には、この質問の他の回答として @ babel/plugin-syntax-dynamic-import が必要になる場合があります。

1
Marco Ng

Vueはasync componentsをサポートします：

ソース： https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/

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

幸運を...

0
Akash

Webpack 2.2.0を使用してReact JSモジュールをバンドルしています。

メインのapp.jsファイルにモジュールをインポート中に同様の問題が発生しました。

ヘッドバンギングの30分後、webpack.config.jsのファイルタイプをテストするためにRegExを更新しました。

に注意してください？テストRegExクエリのシンボル。

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

それは私のために働いた!!

0
rach8garg

たぶんあなたはいくつかのプラグインが欠けているので、試してください：

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」を使用している場合：

Missing Plugins

  • 「.babelrc」を使用している場合、この link の回答を参照してください。
0
LuuSean

この問題を別の方法で解決する方法はわかりませんが、これは簡単に解決できます。ローダーバーベルはアレイの先頭に配置する必要があり、すべてが機能します。

0
Kirill

これは元の質問に対する直接的な答えではありませんが、この提案が同様のエラーのある人に役立つことを願っています：

トランスパックのためにWebpack + Babelで新しいweb-apiを使用すると、

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

その後、ポリフィルのインポートを忘れた可能性があります。

例えば：
fetch() apiを使用してes2015をターゲティングする場合は、

  1. package_jsonにwhatwg-fetch polyfillを追加します
  2. import {fetch} from 'whatwg-fetch'を追加
0
Kiran Mohan