Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there any alternatives to global: true to get es6 node_modules compiled? #247

Closed
StupidIncarnate opened this issue Oct 14, 2017 · 3 comments

Comments

@StupidIncarnate
Copy link

StupidIncarnate commented Oct 14, 2017

Preface

I'm using the browserify api to bundle vendor packages vs the app code itself, so I have two browserify scripts.

Cloned and added here: https://github.com/StupidIncarnate/babelify/tree/api

Everything was working fine until I added material-components-web package. Then it was breaking the vendor generator because I guess it has ES6 exports happening. Error was: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

Adding this to the package.json didn't work:

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

The only way to get it to work was doing global: true in the vendor script, but doing that caused issues with underscore after compiling when you load up the app in the browser:
jashkenas/underscore#2680

So the only way to make that happy was this:
https://github.com/StupidIncarnate/babelify/blob/api/scripts/bundle-vendor.js

var bInstance = browserify().transform("babelify", {
				global: true,
				presets: ["es2015", "es2016", "stage-0"],
				ignore: /\/node_modules\/underscore/
			});

Question

Is there any other way to do this? What are the dangers of using global: true, other than having to patch each package that gets installed?

I would ideally not like to have to do ignores because those can get messy and time consuming when they break.

@StupidIncarnate StupidIncarnate changed the title Is there any alternatives to global: true to get es6+ node_modules compiled? Is there any alternatives to global: true to get es6 node_modules compiled? Oct 14, 2017
@cckrause
Copy link

cckrause commented Apr 6, 2018

Facing the same issue here. I followed instructions as described here: https://github.com/babel/babelify#why-arent-files-in-node_modules-being-transformed

I'm importing an ES6 module from a node_module. That error gets thrown on the first import/export.

it seems like that feature broke.
node version: v6.6.0
babelify: 7.3.0

@paulief
Copy link

paulief commented May 17, 2018

I am having the same issue as @Lirumlarum . It works when I add the browserify transform to the package.json of the dependency, but this is not ideal because everyone on the team will need to do it too when they clone the library.

When I try adding the global: true option to the transform in package.json, it seems to be ignored:

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

I am able to get global to work from the command line like so:

browserify -t [ babelify --global ] src/index.js > bundle.js

but then I can't get the ignore flag to work:

browserify -t [ babelify --global --ignore node_modules ] src/index.js > bundle.js

The above still transforms node_modules. For what it's worth, the global option no longer appears in the options here: http://babeljs.io/docs/usage/api/

Is there something else I should try?

@loganfsmyth
Copy link
Member

I think to successfully compile node_modules you may need to use Browserify's programmatic options, like the final example in the question does.

@StupidIncarnate To answer your question, solving the use strict issue in Babel 6 is difficult unfortunately. In Babel 7.x, you can set sourceType: "unambiguous" http://babeljs.io/docs/en/options#sourcetype

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants