it-swarm.com.de

SyntaxError: 'import' und 'export' dürfen nur bei 'sourceType: module' erscheinen - Warten Sie was?

Betrachten Sie also die folgenden zwei Dateien:

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

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

Der Fehler:

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'

Entschuldige, was? Was ist das für ein Fehler? Was mache ich falsch?

13
TheWebs

ESLint unterstützt dies nativ nicht, da dies der Spezifikation widerspricht. Wenn Sie jedoch babel-eslint parser verwenden, können Sie dies in Ihrer eslint-Konfigurationsdatei tun:

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

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

Antwort von hier aus: Eslint-Fehler ignorieren: 'import' und 'export' dürfen nur auf oberster Ebene erscheinen

8
kaushalop

Bei älteren Versionen von Babel war alles aus der Box herausgekommen. Für die neuere Version müssen Sie die Plugins installieren, die Sie für Ihr Setup benötigen. Zuerst müssen Sie das ES2015-Preset installieren.

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

Als Nächstes müssen Sie babelify mitteilen, dass es die von Ihnen installierte Voreinstellung verwenden soll.

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

Quelle

11
Mike Cluck

Für das korrekte Kompilieren des es2015-response-Codes sollten Sie einige Knotenmodule installieren:

global

  1. npm install -g browserify

in Ihrem App-Verzeichnis:

  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 Erstellen Sie anschließend die Aufgabe "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'));
    });
    

    Im Verzeichnis ./public/dest/javascripts finden Sie die kompilierte es5 app.js-Datei.

3
Red Efire

Beim Importieren eines Moduls aus node_modules, Das im ES6-Stil exportiert wird, ist derselbe Fehler aufgetreten. Nichts, was auf SO für mich ausgearbeitet wurde. Dann fand ich FAQ Abschnitt auf babelify repo . Nach der Erkenntnis Von dort aus tritt der Fehler auf, da Module aus node_modules nicht standardmäßig transpiliert werden und ES6-Deklarationen wie export default ModuleName in ihnen von Node-Powered by Common.js-style-Modulen nicht verstanden werden.

Also habe ich meine Pakete aktualisiert und dann die Option global verwendet, um babelify als globale Transformation auszuführen, wobei alle Knotenmodule ausgenommen sind, die mich interessieren, wie auf der Babelify-Reposeite angegeben:

...    
browserify.transform("babelify", 
    {
        presets: ["@babel/preset-env"], 
        sourceMaps: true, 
        global: true, 
        ignore: [/\/node_modules\/(?!your module folder\/)/]
    }).bundle()
...

Ich hoffe es hilft.

2
curveball

Aus irgendeinem Grund funktionierte babelify 8.0.0 weder mit den es2015 noch mit env. ab 2018-07-10 hat die esmify plugin von mattdesl für mich gearbeitet. Mein Testfall exportierte Spinner aus spin.js als globales Fenster. Mein Beispiel Repo ist hier ; Wichtige Details folgen.

main.js

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

Prüfung

In einem leeren Verzeichnis:

npm init

und akzeptieren Sie alle Standardeinstellungen, dann:

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

Testen Sie die HTML-Datei

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

Nach dem Laden wird in der Mitte der Seite ein Drehfeld angezeigt.

Hinweis: Ich bin nicht an mattdesl oder esmify angeschlossen.

1
cxw

In . Eslintrc müssen Sie möglicherweise die Parser-Optionen angeben, zum Beispiel:

{
"rules": {
    "indent": [
        2,
        4
    ],
    "linebreak-style": [
        2,
        "unix"
    ],
    "semi": [
        2,
        "always"
    ]
},
"env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
}

}

Bitte überprüfen Sie die Dokumentation von eslint .

Dieser Fehler kann dadurch verursacht werden, dass tsify plugin nicht zum Kompilieren von TypeScript in der gulp-Task enthalten ist.

beispiel

    var tsify = require('tsify');

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

Installation und Verwendung finden Sie hier: https://www.npmjs.com/package/tsify

0
Stuart Bentley

in meinem Fall habe ich export anstelle von exports verwendet.

Ändern Sie export in export.

0
saigopi