SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Gulp

Question

Consider the following two files:

app.js

import Game       from \'./game/game\';
import React      from \'react\';
import ReactDOM   fro         


        

Answer 1

I tried all the answers above, none of them worked for me, I even tried using gulp-include / require syntax, they were neither the solution nor enough for my requirement.

Here was my requirement.

1. Bundle all modules/files into one
2. Keep all comments/JSDocs
3. Keep all types ( such as const example = (parameter: string) => {} )
4. Use import/export syntax

The reason for the listed requirements is because we need a repository to store our shared-function, shared-config, shared-types, and shared constants as an npm package ( install with URL ). In this case, we already know our projects are all using TypeScript so there is no need to compile our shared-module into .js, and we also need to keep all descriptions as other packages do ( JSDoc and Type really help ).

So far the best I can do is using browserify with tsify. I accidentally found this workaround from here.

browserify()
    .plugin(tsify, { target: 'es6' })
    .transform(babelify, { extensions: [ '.tsx', '.ts' ] })

I am still searching for a way to keep our inline-types and comments/JSDocs, but I believe this is enough for your need.

Answer 2

This error can be caused by not including tsify plugin to compile typescript in the gulp task.

example

    var tsify = require('tsify');

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

See installation and usage here: https://www.npmjs.com/package/tsify

Answer 3

In .eslintrc you may have to specify the parser options, for example:

{
"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
    }
}

}

Please check the documentation guide from eslint.

Answer 4

in my case i used export instead of exports.

change export to exports.