web-dev-qa-db-fra.com

'import' et 'export' ne peuvent apparaître qu'au niveau supérieur

J'utilise webpack avec vuejs. Webpack fait son travail, mais quand je regarde le fichier app.js sorti, cela me donne cette erreur. 

'import' et 'export' ne peuvent apparaître qu'au niveau supérieur

Je suppose que c'est un problème avec babel qui ne convertit pas le code? Parce que je reçois cela dans le navigateur lors de l'affichage de l'application.

Importation de jeton inattendue

Voici mon entry.js pour mon application 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');

Voici mon 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']
        }
    }]
  }
};

Voici mon fichier 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
25
Jayson H

'import' et 'export' ne peuvent apparaître qu'au niveau supérieur

Cela signifie que webpack regroupe le code ES6 non transpilé. C'est pourquoi ces instructions import/export sont trouvées. babel-loader ne doit donc pas transpiler ce que vous attendez.

Si vous supprimez simplement les règles include et exclude de sa configuration de chargeur, le comportement par défaut consistant à tout transpiler en plus du contenu de node_modules sera activé. Pour une raison ou une autre, les règles actuelles entraînent l’omission de tout/partie des fichiers.

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

J'ai eu cette erreur quand il me manquait un crochet de fermeture.

Loisirs simplifiés:

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

export default Foo;
69
lukeaus

Assurez-vous que vous avez un fichier .babelrc qui déclare ce que Babel est supposé transpiler. J'ai passé environ 30 minutes à essayer de comprendre cette erreur exacte. Après avoir copié un tas de fichiers dans un nouveau dossier et découvert que je n’avais pas copié le fichier .babelrc car il était caché.

{
  "presets": "es2015"
}

ou quelque chose du genre est ce que vous cherchez dans votre fichier .babelrc

8
Ace

Recherchez également une erreur de syntaxe de crochet à double ouverture {{ qui peut entraîner l'apparition de ce message

3
Eric Knudtson

En utilisant webpack 4.14.0 et babel-cli 6.26, je devais installer ce plugin Babel pour corriger l'erreur SyntaxError: 'import' and 'export' may only appear at the top level: babel-plugin-syntax-dynamic-import

Il était lié à partir de Webpack Code Splitting Docs .

3
Jon Higgins

J'ai eu le même problème avec webpack4, il me manquait le fichier .babelrc dans le dossier racine: 

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

De 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

Mon erreur est causée par une déclaration System.import('xxx.js'). Après le remplacer par import xxx from 'xxx.js', l'erreur est résolue.

Je pense que c'est parce que require('xxx.scss') a également provoqué une importation dynamique.

À mon avis, dans le cas de la description de la question, les importations dynamiques ne sont pas nécessaires. Le problème doit donc être résolu en remplaçant simplement tous les requires par import ... from ....

Dans certains cas, les importations dynamiques sont nécessaires, vous devrez peut-être @ babel/plugin-syntax-dynamic-import comme d’autres réponses à cette question.

1
Marco Ng

J'utilise Webpack 2.2.0 pour regrouper mes modules React JS. 

Un problème similaire s'est produit lors de l'importation de modules dans mon fichier principal app.js.

Après 30 minutes d'écoute, j'ai mis à jour le RegEx pour tester les types de fichiers dans mon webpack.config.js.

Remarquez attentivement le? symbole dans la requête test RegEx.

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

Cela a fonctionné pour moi !!

0
rach8garg

Je ne sais pas comment résoudre ce problème différemment, mais cela est résolu simplement. Le chargeur babel doit être placé au début du tableau et tout fonctionne.

0
Kirill

J'ai eu cette erreur après la mise à niveau vers webpack 4.29.x. Il s'est avéré que webpack 4.29.x avait déclenché le bogue peerDependency de npm . Et selon eux, le bogue ne sera pas corrigé prochainement. Voici la solution workaround de sokra

  • ajoutez "acorn": "^6.0.5" à votre application package.json.
  • Passez à yarn. Il n'a pas ce bug.
  • npm update acorn --depth 20npm dedupe (ne fonctionne que dans certains cas)
  • rm package-lock.jsonnpm i (ne fonctionne que dans certains cas)
  • met à jour tous les autres packages dépendant d'une ancienne version de gland (ne fonctionne que dans certains cas)
  • verrouillez webpack à 4.28.4 dans votre package.json
0
paibamboo