语法错误:'import'和'export'只能与'sourceType: module'一起使用 - Gulp

89

考虑以下两个文件:

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

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

错误:

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'

这是什么错误?我做错了什么?


1
请查看GitHub上的此问题。使用较新版本的Babel和babelify似乎存在问题。 - Mike Cluck
1
在我的情况下,我没有使用babelify,但仍然遇到了这个错误。 - Kokodoko
在我的情况下,当我尝试编译导入TypeScript文件的JS文件时(例如import * as Foo from "./foo" (foo.ts)),我使用browserify和babelify遇到了这个错误。解决方法是将--extensions ".ts,.js"传递给babelify转换器(这样babel就会包含TS文件进行编译),并将--extension=.js --extension=.ts传递给browserify(这样browserify可以解析导入语句的文件路径)。请注意,babel的--extensions选项似乎没有在babel选项中记录 - 我在这里找到了它。 - Galen Long
12个回答

-1

这个错误可能是由于在 gulp 任务中没有包含 tsify 插件来编译 TypeScript 导致的。

示例

    var tsify = require('tsify');

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

请参见此处的安装和使用说明: https://www.npmjs.com/package/tsify


-6
在我的情况下,我使用了export而不是exports
export更改为exports

5
很多东西虽然能够运行,但并不是正确的答案。删除所有的 JavaScript 代码,用一堆静态图像和点击页面更改来替换网站也“能够运行”,但这并不是问题的答案。 - junvar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接