Babelify throws ParseError on import a module from node_modules

Question

I'm working with Babelify and Browserify. Also, I'm using ES6 style module features by node module system.

I would like to put all my own modules into node_modules/libs.

For instance:

test.js in node_modules/libs

export default () => {
  console.log('Hello');
};

main.js (will be compiled to bundle.js)

import test from 'libs/test';

test();

After that, I have compiled the above codes to bundle.js with this command:

browserify -t babelify main.js -o bundle.js

But unfortunately, I have got some error:

export default () => {
^

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Directory structure:

[test]
  `-- node_modules
  │ `-- libs
  │  `-- test.js
  `-- main.js

But, when own modules not in node_modules like this:

[test]
  `-- libs
  │ `-- test.js
  `-- main.js

Then, it works fine. How can I use the ES6 style modules with babelify in node_modules?

Solution 1

That is how Browserify transforms work, transforms only have an effect directly in the module that is being referenced.

If you want a module in node_modules to have a transform, you'd need to add a package.json to that module and add babelify as a transform for that module too. e.g.

"browserify": {
  "transform": [
    "babelify"
  ]
},

inside your package.json plus babelify as a dependency will tell browserify to run the babelify transform on any file inside that module.

Having libs be a folder in node_modules is however probably a bad idea. Generally that folder would have true standalone modules in it. I'd generally say that if the folder can't be taken and reused elsewhere, then it shouldn't be in node_modules.

Update

For Babel v6, which was recently released, you will also need to specify which transformations you would like to perform on your code. For that, I would recommend creating a .babelrc file in your root directory to configure Babel.

{
  "presets": ["es2015"]
}

and

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

Solution 2

You can specify source transforms in the package.json in the browserify.transform field. There is more information about how source transforms work in package.json on the module-deps readme.

Source: https://github.com/substack/node-browserify#browserifytransform

---

Example (my_batman_project/node_modules/test_robin_module/package.json):

"browserify": {
  "transform": [
    "babelify"
  ]
},

browserify will read the configuration and perform any given transforms automatically.

Solution 3

I believe this issue is actually related to ESLint.

ESLint 2.0 changed what's required for it to interpret ES6 modules. http://eslint.org/docs/user-guide/migrating-to-2.0.0

You'll need to modify your ecmaFeatures configuration option and replace it with something like:

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },