12 votes

SyntaxError : 'import' et 'export' ne peuvent apparaître qu'avec 'sourceType : module' - Attendez quoi ?

Considérons donc les deux fichiers suivants :

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

En gulpfile.js

var gulp        = require('gulp');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var watch       = require('gulp-watch');

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

L'erreur :

gulp make:game
[13:09:48] Using gulpfile ~/Documents/ice-cream/gulpfile.js
[13:09:48] Starting 'make:game'...

events.js:154
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Je suis désolé de quoi ? Quelle est cette erreur ? Qu'est-ce que je fais de travers ?

11voto

Mike C Points 1481

Les anciennes versions de Babel étaient livrées avec tout ce qu'il fallait. La version la plus récente nécessite l'installation de tous les plugins dont votre installation a besoin. Tout d'abord, vous devez installer le preset ES2015.

npm install babel-preset-es2015 --save-dev

Ensuite, vous devez indiquer à babelify d'utiliser le preset que vous avez installé.

return browserify({ ... })
  .transform(babelify.configure({
    presets: ["es2015"]
  }))
  ...

Source

5voto

kaushalop Points 114

ESLint ne prend pas en charge cette fonctionnalité de manière native, car elle est contraire aux spécifications. Mais si vous utilisez l'analyseur babel-eslint, vous pouvez le faire dans votre fichier de configuration eslint :

{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  }
}

Doc ref : https://github.com/babel/babel-eslint#configuration

La réponse est renvoyée à partir d'ici : ignorer l'erreur eslint : "import" et "export" ne peuvent apparaître qu'au niveau supérieur

3voto

Red Efire Points 101

Pour compiler correctement le code es2015-react, vous devez installer certains modules node :

globalement

  1. npm install -g browserify

dans votre répertoire d'applications :

  1. npm install browserify --save-dev
  2. npm install babelify --save-dev
  3. npm install babel-preset-es2015 --save-dev
  4. npm install babel-preset-stage-0 --save-dev
  5. npm install babel-preset-react --save-dev Créez ensuite une tâche gulp :

    var browserify = require("browserify");
    var babelify = require("babelify");
    
    gulp.task('es6-compile', function() {
      browserify({ debug: true })
        .transform(babelify.configure({ presets: ["es2015","react", "stage-0"] }))
        .require("./public/src/javascripts/app.js", { entry: true })
        .bundle()
        .pipe(gulp.dest('./public/dest/javascripts'));
    });

    Dans le répertoire ./public/dest/javascripts, vous trouverez le fichier compilé es5 app.js.

1voto

cxw Points 872

Pour une raison inconnue, babelify 8.0.0 n'a pas fonctionné pour moi avec les présentations es2015 ou env. Cependant, en date du 2018-07-10 , le esmify plugin par mattdesl a fonctionné pour moi. Mon cas de test consistait à exporter Spinner de spin.js comme une fenêtre globale. Mon exemple est le suivant aquí Les détails clés suivent.

main.js

import {Spinner} from 'spin.js';
window.Spinner = Spinner;

Test

Dans un répertoire vide :

npm init

et accepter toutes les valeurs par défaut :

npm install --save spin.js
npm install --save-dev browserify esmify
npx browserify -p esmify main.js -o main-packed.js

Fichier HTML de test

<html><head>
    <link rel="stylesheet" href="node_modules/spin.js/spin.css" />
    <script src="main-packed.js"></script>    <!-- <== the browserify output -->
</head>
<body>
    <div id="x"></div>
    <script>
    var target = document.getElementById('x');
    var spin = new Spinner().spin(target);
    </script>
</body></html>

Lorsqu'il est chargé, il affiche un spinner au centre de la page.

Note : Je ne suis pas affilié à mattdesl ou esmify.

0voto

Stuart Bentley Points 46

Cette erreur peut être causée par le fait de ne pas inclure le plugin tsify pour compiler les scripts dans la tâche gulp.

exemple

    var tsify = require('tsify');

    return browserify({ ... })
      .plugin(tsify)
      .transform(babelify.configure({
        presets: ["es2015"]
      }))
      ...

Voir l'installation et l'utilisation ici : https://www.npmjs.com/package/tsify

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X