web-dev-qa-db-de.com

'import' und 'export' dürfen nur auf oberster Ebene erscheinen

Ich verwende Webpack mit vuejs. Webpack macht seine Sache, aber wenn ich mir die ausgegebene app.js-Datei ansehe, wird mir dieser Fehler angezeigt. 

'import' und 'export' dürfen nur auf oberster Ebene erscheinen

Ich gehe davon aus, dass es ein Problem ist, weil babel den Code nicht konvertiert? Weil ich dies beim Anzeigen der Anwendung im Browser erhalte.

Unerwarteter Token-Import

Hier ist meine entry.js für meine Vuejs-Anwendung: 

/*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');

Hier sind meine 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']
        }
    }]
  }
};

Hier ist meine packages.json-Datei:

{
  "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
25
Jayson H

'import' und 'export' dürfen nur auf oberster Ebene erscheinen

Dies bedeutet, dass das Webpack den nicht transpilierten ES6-Code bündelt, weshalb diese import/export-Anweisungen gefunden werden. babel-loader darf sich daher nicht nach Ihren Wünschen richten.

Wenn Sie einfach die include- und exclude-Regeln aus der Loader-Konfiguration entfernen, wirkt sich das Standardverhalten aus, alle Elemente außer dem, was sich in node_modules befindet, zu transpilieren.

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']
      }
    }]
  }
};
10
Jacob

Ich habe diese Fehlermeldung erhalten, als mir eine schließende Klammer fehlte.

Vereinfachte Erholung:

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

export default Foo;
69
lukeaus

Vergewissern Sie sich, dass Sie eine .babelrc-Datei haben, die angibt, was Babel als Transpiling verwenden soll. Ich habe etwa 30 Minuten damit verbracht, diesen exakten Fehler herauszufinden. Nachdem ich ein paar Dateien in einen neuen Ordner kopiert und herausgefunden hatte, dass ich die .babelrc-Datei nicht kopiert habe, weil sie verborgen war.

{
  "presets": "es2015"
}

oder etwas in dieser Richtung ist das, wonach Sie in Ihrer .babelrc-Datei suchen

8
Ace

Achten Sie auch auf einen öffnenden Klammer-Syntaxfehler sowie {{, durch den diese Fehlermeldung angezeigt werden kann

3
Eric Knudtson

Verwenden von webpack 4.14.0 und babel-cli 6.26 Ich musste dieses Babel-Plugin installieren, um den SyntaxError: 'import' and 'export' may only appear at the top level-Fehler zu beheben: babel-plugin-syntax-dynamic-import

Es wurde von Webpack Code Splitting Docs aus verlinkt.

3
Jon Higgins

Ich hatte das gleiche Problem mit webpack4, mir fehlte die Datei .babelrc im Stammordner: 

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

Von 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",
2
Bastien

Mein Fehler wird durch eine System.import('xxx.js')-Anweisung verursacht. Nach dem Ersetzen durch import xxx from 'xxx.js' wurde der Fehler behoben.

Ich denke es liegt daran, dass require('xxx.scss') auch einen dynamischen Import verursacht hat.

Für den Fall in der Fragenbeschreibung sind meines Erachtens keine dynamischen Importe erforderlich. Daher sollte das Problem gelöst werden, indem alle requires durch import ... from ... ersetzt werden.

Für einige Fälle, in denen dynamische Importe erforderlich sind, benötigen Sie möglicherweise als Antwort auf diese Frage @ babel/plugin-syntax-dynamic-import .

1
Marco Ng

Vue unterstützt async components:

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

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

Viel Glück...

0
Akash

Ich verwende Webpack 2.2.0, um meine React JS-Module zu bündeln. 

Beim Importieren von Modulen in meiner Hauptdatei app.js ist ein ähnliches Problem aufgetreten.

Nach 30 Minuten Headbanging habe ich das RegEx für das Testen der Dateitypen in meiner webpack.config.js aktualisiert.

Beachten Sie sorgfältig das? Symbol in der Test-RegEx-Abfrage.

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

Es hat für mich funktioniert !!

0
rach8garg

Möglicherweise fehlen Ihnen einige Plugins. Versuchen Sie Folgendes:

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
  • Wenn Sie "Webpack.config.js" verwenden:

Missing Plugins

  • Wenn Sie ".babelrc" verwenden, lesen Sie die Antwort in diesem Link .
0
LuuSean

Ich weiß nicht, wie ich dieses Problem anders lösen soll, aber das wird einfach gelöst. Der Loader Babel sollte am Anfang des Arrays platziert werden und alles funktioniert.

0
Kirill

Dies ist keine direkte Antwort auf die ursprüngliche Frage, aber ich hoffe, dieser Vorschlag hilft jemandem mit ähnlichen Fehlern:

Wenn Sie eine neuere Web-API mit Webpack + Babel zum Transpilieren verwenden, erhalten Sie

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

dann hast du wohl vergessen eine polyfüllung zu importieren.

Zum Beispiel:
Wenn Sie fetch() api und Targeting für es2015 verwenden, sollten Sie dies tun

  1. füge whatwg-fetch polyfill zu package.json hinzu
  2. addiere import {fetch} from 'whatwg-fetch'
0
Kiran Mohan

Ich habe diesen Fehler nach dem Upgrade auf Webpack 4.29.x erhalten. Es stellte sich heraus, dass das Webpack 4.29.x den peerDependency-Fehler von npm auslöste. Nach ihrer Aussage wird der Fehler nicht bald behoben. Hier ist der workaround von sokra

  • fügen Sie "acorn": "^6.0.5" zu Ihrer Anwendung package.json hinzu.
  • Wechseln Sie zu yarn. Es hat diesen Fehler nicht.
  • npm update acorn --depth 20npm dedupe (funktioniert nur in einigen Fällen)
  • rm package-lock.jsonnpm i (funktioniert nur in einigen Fällen)
  • update aller anderen Pakete, die von einer älteren Version für acorn abhängig sind (funktioniert nur in einigen Fällen)
  • sperren Sie das Webpack um 4.28.4 in Ihrer package.json
0
paibamboo