web-dev-qa-db-fra.com

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

Considérez 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';

Le 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é, quoi? Quelle est cette erreur? Qu'est-ce que je fais mal?

javascriptgulpecmascript-6browserifybabel
13
TheWebs

De manière native, ESLint ne prend pas cela en charge car cela 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
  }
}

Réf. Doc: https://github.com/babel/babel-eslint#configuration

Réponse mentionnée à partir d'ici: ignore l'erreur eslint: 'import' et 'export' ne peuvent apparaître qu'au niveau supérieur

8
kaushalop

Les anciennes versions de Babel sont sorties de la boîte. La nouvelle version nécessite l'installation des plugins nécessaires à votre configuration. Tout d'abord, vous devez installer le préréglage ES2015.

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

Ensuite, vous devez dire à babelify d'utiliser le préréglage que vous avez installé.

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

La source

11
Mike Cluck

Pour compiler correctement le code es2015-react, vous devez installer certains modules de nœud:

globalement

  1. npm install -g browserify

dans votre répertoire d'applications:

  1. npm installer browserify --save-dev
  2. npm installer babelify --save-dev
  3. npm installez babel-preset-es2015 --save-dev
  4. npm installez babel-preset-stage-0 --save-dev

  5. npm install babel-preset-react --save-dev Créez ensuite la 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.

3
Red Efire

Pour une raison quelconque, babelify 8.0.0 ne fonctionnait pas pour moi, que ce soit avec les cadeaux es2015 ou env. Cependant, au 2018-07-10 , le esmify plugin de mattdesl a fonctionné pour moi. Mon scénario de test exportait Spinner de spin.js sous forme de fenêtre globale. Mon exemple de repo est ici ; Les détails clés suivent.

main.js

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

Tester

Dans un répertoire vide:

npm init

et accepter tous les défauts, alors:

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

Tester le fichier HTML

<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>

Une fois chargé, il affiche une icône au centre de la page.

Remarque: je ne suis pas affilié à mattdesl ni à esmify.

1
cxw

Cette erreur peut être provoquée par l'inclusion de tsify plugin dans la compilation de TypeScript dans la tâche gulp.

exemple

    var tsify = require('tsify');

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

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

0
Stuart Bentley

dans mon cas, j'ai utilisé export au lieu de exports .

change export to exports .

0
saigopi