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

[Discussion] Upgrade to Babel 6 breaks parts of the package ecosystem #4062

Closed
ide opened this Issue Nov 11, 2015 · 20 comments

Comments

Projects
None yet
@ide
Collaborator

ide commented Nov 11, 2015

With the upgrade to Babel 6, two things changed:

  • Babel or the packager appears to be looking at .babelrc in each npm package. When libraries like Redux publish a .babelrc for Babel 5 (ex: with the "stage" field), Babel 6 throws a TransformError.
  • Babel appears to not apply the .babelrc of the project root to each npm package, even if they don't contain .babelrc files

Before, you could configure .babelrc in your project root and Babel would compute something like the union of .babelrc + the options passed to transform(), and it would apply all those options to everything under node_modules. But now it seems not to apply the options specified in .babelrc to each npm package, so perhaps each package needs to ship with its own .babelrc and list its plugins in the package.json dependencies.

cc @sebmck you're probably the best person to comment on the state of things

@kittens

This comment has been minimized.

Show comment
Hide comment
@kittens

kittens Nov 11, 2015

Member

Babel or the packager appears to be looking at .babelrc in each npm package. When libraries like Redux publish a .babelrc for Babel 5 (ex: with the "stage" field), Babel 6 throws a TransformError.

Probably no way around this besides to get those packages to add .babelrc to their .npmignore.

Babel appears to not apply the .babelrc of the project root to each npm package, even if they don't contain .babelrc files

There's a bug in the latest version where it'll stop looking for parent .babelrc files if it finds a package.json. It'll be fixed in the next patch.

Member

kittens commented Nov 11, 2015

Babel or the packager appears to be looking at .babelrc in each npm package. When libraries like Redux publish a .babelrc for Babel 5 (ex: with the "stage" field), Babel 6 throws a TransformError.

Probably no way around this besides to get those packages to add .babelrc to their .npmignore.

Babel appears to not apply the .babelrc of the project root to each npm package, even if they don't contain .babelrc files

There's a bug in the latest version where it'll stop looking for parent .babelrc files if it finds a package.json. It'll be fixed in the next patch.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Nov 11, 2015

Collaborator

Awesome. Thanks for the clarification. I'll open up issues on the various affected repos to stop publishing .babelrc, and will let the Babel team take care of honoring the root .babelrc.

Collaborator

ide commented Nov 11, 2015

Awesome. Thanks for the clarification. I'll open up issues on the various affected repos to stop publishing .babelrc, and will let the Babel team take care of honoring the root .babelrc.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Nov 13, 2015

Collaborator

I've been testing master with Babel 6 for a few days and am arriving at the conclusion that we need to make a couple changes to Babel for RN 0.16. I think I have a pretty clear idea of the issues at hand:

  • We need a way for the RN packager to tell Babel to ignore .babelrc files (but not JS source files) under node_modules. Even if we were to add .babelrc to .npmignore, the .babelrc would still be present in local checkouts of Redux (ex: if you're using npm link or literally checked out redux under node_modules to work on it). Proposal: add an option to Babel like ignore-babelrc which is like ignore but applies only to .babelrc files.
  • We need decorators back, possibly as an unofficial plugin, to support libraries like react-redux and react-mixin.
Collaborator

ide commented Nov 13, 2015

I've been testing master with Babel 6 for a few days and am arriving at the conclusion that we need to make a couple changes to Babel for RN 0.16. I think I have a pretty clear idea of the issues at hand:

  • We need a way for the RN packager to tell Babel to ignore .babelrc files (but not JS source files) under node_modules. Even if we were to add .babelrc to .npmignore, the .babelrc would still be present in local checkouts of Redux (ex: if you're using npm link or literally checked out redux under node_modules to work on it). Proposal: add an option to Babel like ignore-babelrc which is like ignore but applies only to .babelrc files.
  • We need decorators back, possibly as an unofficial plugin, to support libraries like react-redux and react-mixin.
@hendrikswan

This comment has been minimized.

Show comment
Hide comment
@hendrikswan

hendrikswan Nov 19, 2015

Contributor

@ide When this is resolved, it would help the community if you'd post the solution here. It seems quite a lot of people are confused on how to configure babel in a react-native project.
I would love to add to the docs to explain how to do it once there is a way that is working correctly with the latest version of babel, but at the moment I am a bit stuck, as are many others.

Contributor

hendrikswan commented Nov 19, 2015

@ide When this is resolved, it would help the community if you'd post the solution here. It seems quite a lot of people are confused on how to configure babel in a react-native project.
I would love to add to the docs to explain how to do it once there is a way that is working correctly with the latest version of babel, but at the moment I am a bit stuck, as are many others.

@adriansprod

This comment has been minimized.

Show comment
Hide comment
@adriansprod

adriansprod Nov 25, 2015

+1. I can't upgrade to v0.15 and use Redux because of the Babel 5/6 issues

But that's not as bad as the way v0.16.0rc blows up Xcode with compiler errors.

adriansprod commented Nov 25, 2015

+1. I can't upgrade to v0.15 and use Redux because of the Babel 5/6 issues

But that's not as bad as the way v0.16.0rc blows up Xcode with compiler errors.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Nov 25, 2015

Collaborator

@adrian-social-prod Regarding the compiler errors, make sure you are using the latest version of Xcode.

Collaborator

ide commented Nov 25, 2015

@adrian-social-prod Regarding the compiler errors, make sure you are using the latest version of Xcode.

@hendrikswan

This comment has been minimized.

Show comment
Hide comment
@hendrikswan

hendrikswan Nov 26, 2015

Contributor

@ide This might sound a bit crazy.. I'll probably be offered up to the open source gods, but.. Seeing that things are a bit broken with RN + Babel at the moment, perhaps rolling back to Babel 5 would help in the short run until Babel has been patched to support decorators (officially or unofficially) and to ignore node_module .babelrc files?

Contributor

hendrikswan commented Nov 26, 2015

@ide This might sound a bit crazy.. I'll probably be offered up to the open source gods, but.. Seeing that things are a bit broken with RN + Babel at the moment, perhaps rolling back to Babel 5 would help in the short run until Babel has been patched to support decorators (officially or unofficially) and to ignore node_module .babelrc files?

@likidu

This comment has been minimized.

Show comment
Hide comment
@likidu

likidu Nov 30, 2015

+1. I'm blocked on migrating to Babel 6 due to both issues covered here: decoration and old .babelrc format.

likidu commented Nov 30, 2015

+1. I'm blocked on migrating to Babel 6 due to both issues covered here: decoration and old .babelrc format.

@niftylettuce

This comment has been minimized.

Show comment
Hide comment
@niftylettuce

niftylettuce Dec 3, 2015

Contributor

Had the issue here #4516 - I'm using npm link mypackage inside my react-native project and this error occurred immediately after that.

Contributor

niftylettuce commented Dec 3, 2015

Had the issue here #4516 - I'm using npm link mypackage inside my react-native project and this error occurred immediately after that.

fson added a commit to reindexio/reindex-js that referenced this issue Dec 6, 2015

Add .babelrc to .npmignore
Latest versions of react-native use Babel 6, which tries to read the
options from .babelrc in the installed reindex-js package and fails
because it has options for Babel 5. As a fix to this, remove .babelrc
from the published package by adding it to .npmignore.
(See: facebook/react-native#4062)
@ajwhite

This comment has been minimized.

Show comment
Hide comment
@ajwhite

ajwhite Dec 7, 2015

Contributor

I'm in the same boat as @adriansprod #4062 (comment) -- decorators and old .babelrc is a set back for us at the moment.

Currently exploring workarounds to use Babel 5 with 0.16.0, specifically by removing the babel 6 executable and having the packager use the globally installed babel 5 reduxjs/react-redux#206 (comment)

Contributor

ajwhite commented Dec 7, 2015

I'm in the same boat as @adriansprod #4062 (comment) -- decorators and old .babelrc is a set back for us at the moment.

Currently exploring workarounds to use Babel 5 with 0.16.0, specifically by removing the babel 6 executable and having the packager use the globally installed babel 5 reduxjs/react-redux#206 (comment)

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Dec 14, 2015

Collaborator

One temporary workaround would be, to delete all .babelrc files in the npm postinstall hook,

{
    ...
    "scripts": {
        "postinstall": "find node_modules -type f -name .babelrc | grep -v /react-native/ | xargs rm"
    }
    ...
}
Collaborator

satya164 commented Dec 14, 2015

One temporary workaround would be, to delete all .babelrc files in the npm postinstall hook,

{
    ...
    "scripts": {
        "postinstall": "find node_modules -type f -name .babelrc | grep -v /react-native/ | xargs rm"
    }
    ...
}
@skevy

This comment has been minimized.

Show comment
Hide comment
@skevy

skevy Dec 15, 2015

Collaborator

This was mine -

find node_modules -type f -not -regex \".*react-native\\/.*\" -name \".babelrc\" -exec rm -rf {} \\;

Yours is a little easier to parse :-p

Collaborator

skevy commented Dec 15, 2015

This was mine -

find node_modules -type f -not -regex \".*react-native\\/.*\" -name \".babelrc\" -exec rm -rf {} \\;

Yours is a little easier to parse :-p

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Dec 15, 2015

Collaborator

@skevy Haha, that's nasty 😂

Collaborator

satya164 commented Dec 15, 2015

@skevy Haha, that's nasty 😂

@ajwhite

This comment has been minimized.

Show comment
Hide comment
@ajwhite

ajwhite Dec 15, 2015

Contributor

Thanks for sharing @satya164, I think I'm going to go with that approach for now over #4062 (comment)

Contributor

ajwhite commented Dec 15, 2015

Thanks for sharing @satya164, I think I'm going to go with that approach for now over #4062 (comment)

@jugimaster

This comment has been minimized.

Show comment
Hide comment
@jugimaster

jugimaster Dec 19, 2015

As a bit of a side-note, I can't help but think something is wrong when we have a separate GitHub repo for one tiny source file, with reams of extraneous files lying around, and no one bats an eye.

It was always possible not to pollute the global namespace with wild abandon, but the front-end hive-mind decided that no one should need to be able to arrange his <script> tags in the correct order (for his specific use-case), and therefore everything was to be in "modules", even though JavaScript itself didn't support modules.

And here we are. Every front-end project is littered with "standard" configuration files for extraneous tools that are not related to the actual software being delivered. We're supposed to write some JavaScript, and have browsers load and run it. It's not that complicated.

jugimaster commented Dec 19, 2015

As a bit of a side-note, I can't help but think something is wrong when we have a separate GitHub repo for one tiny source file, with reams of extraneous files lying around, and no one bats an eye.

It was always possible not to pollute the global namespace with wild abandon, but the front-end hive-mind decided that no one should need to be able to arrange his <script> tags in the correct order (for his specific use-case), and therefore everything was to be in "modules", even though JavaScript itself didn't support modules.

And here we are. Every front-end project is littered with "standard" configuration files for extraneous tools that are not related to the actual software being delivered. We're supposed to write some JavaScript, and have browsers load and run it. It's not that complicated.

audionerd added a commit to audionerd/redux-api-middleware that referenced this issue Apr 21, 2016

ZauberNerd added a commit to ZauberNerd/react-native-mock that referenced this issue May 23, 2016

Ignore .babelrc through .npmignore to fix issue with react-native pac…
…kager

The react-native packager searches through all directories and parses
.babelrc config files if it finds any. This breaks the builds if these
.babelrc files are either for babel 5 or if they contain plugins unknown
to the parent project.

@see: facebook/react-native#4062

jmurzy referenced this issue in ReactTraining/history Aug 12, 2016

@steida

This comment has been minimized.

Show comment
Hide comment
@steida

steida Aug 27, 2016

gulp task for fixing that

import gulp from 'gulp';
import del from 'del';

gulp.task('native-fix', async () => {
  // github.com/facebook/react-native/issues/4062#issuecomment-164598155
  // This is a very long term issue. We can't fix whole npm.
  await del(['node_modules/**/.babelrc', '!node_modules/react-native/**']);
});

It's from https://github.com/este/este

steida commented Aug 27, 2016

gulp task for fixing that

import gulp from 'gulp';
import del from 'del';

gulp.task('native-fix', async () => {
  // github.com/facebook/react-native/issues/4062#issuecomment-164598155
  // This is a very long term issue. We can't fix whole npm.
  await del(['node_modules/**/.babelrc', '!node_modules/react-native/**']);
});

It's from https://github.com/este/este

fson added a commit to fson/redux-optimist that referenced this issue Nov 3, 2016

Remove .babelrc from the published package
Installed from npm, this package doesn't work with React Native,
because although the released code is transpiled, .baberc is
also published to npm.

Fixed by adding the `files` property in package.json to prevent .babelrc from being published.

See:
facebook/react-native#4062
@ForbesLindesay

This comment has been minimized.

Show comment
Hide comment
@ForbesLindesay

ForbesLindesay Nov 3, 2016

Processing npm modules with babel is a bug and will break many packages. This is not how any of the rest of the node.js/JavaScript ecosystem operates. This problem exclusively affects react-native.

ForbesLindesay commented Nov 3, 2016

Processing npm modules with babel is a bug and will break many packages. This is not how any of the rest of the node.js/JavaScript ecosystem operates. This problem exclusively affects react-native.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Nov 3, 2016

Collaborator

@ForbesLindesay I think it's actually really important for npm consumers to do transpilation. That doesn't preclude authors from transpile as well (just do both) but there are a lot of benefits to transpiling node_modules that I wrote up here: https://gist.github.com/ide/e7b9181984933ebb0755c7367a32e7e8

Collaborator

ide commented Nov 3, 2016

@ForbesLindesay I think it's actually really important for npm consumers to do transpilation. That doesn't preclude authors from transpile as well (just do both) but there are a lot of benefits to transpiling node_modules that I wrote up here: https://gist.github.com/ide/e7b9181984933ebb0755c7367a32e7e8

@ForbesLindesay

This comment has been minimized.

Show comment
Hide comment
@ForbesLindesay

ForbesLindesay Nov 4, 2016

There are times when you want to transpile things in node_modules, but this should be done under the assumption that the code in node_modules is pure, standards compliant JavaScript code. It should not make use of .babelrc files, and it should not add strict mode if the file wasn't already in strict mode. Running babel in its default mode on node_modules is highly risky and should be avoided. Having the ability to run carefully chosen transforms against node_modules may be useful in the future, but it is a pretty specialised use case.

ForbesLindesay commented Nov 4, 2016

There are times when you want to transpile things in node_modules, but this should be done under the assumption that the code in node_modules is pure, standards compliant JavaScript code. It should not make use of .babelrc files, and it should not add strict mode if the file wasn't already in strict mode. Running babel in its default mode on node_modules is highly risky and should be avoided. Having the ability to run carefully chosen transforms against node_modules may be useful in the future, but it is a pretty specialised use case.

@andon andon referenced this issue Dec 1, 2016

Closed

Fix .babelrc #7

huston007 added a commit to huston007/react-native-mock that referenced this issue Jun 9, 2017

Ignore .babelrc through .npmignore to fix issue with react-native pac…
…kager

The react-native packager searches through all directories and parses
.babelrc config files if it finds any. This breaks the builds if these
.babelrc files are either for babel 5 or if they contain plugins unknown
to the parent project.

@see: facebook/react-native#4062

@facebook facebook locked as resolved and limited conversation to collaborators Jul 20, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.