.babelrc custom environment name
oliviertassinari opened this issue · 15 comments
I'm not sure this issue is going to be fixed, I'm opening it in case someone else is facing the same issue.
The issue
Since this PR #6351, It's no longer possible to use a custom babel environment name.
E.g. Running the follwoing command won't work.
NODE_ENV=docs-native-development node node_modules/react-native/local-cli/cli.js start
With .babelrc
{
"env": {
"docs-native-development": {
"presets": ["react-native"]
}
}
}(Tested on RN 0.29.0)
Potential fix
I'm wondering if we could use the extraPlugins variable to inject the transform-react-jsx-source plugin when options.dev is true.
Current work-around
.babelrc
{
"env": {
"development": {
"presets": ["react-native"]
}
}
}I the same issue. I am setting up react-native in a repo where I already have a babel conf and would like to be able to use a specific babel env.
I tried using BABEL_ENV and NODE_ENV but none of this is working.
Here is a piece of my package.json
// ...
"scripts": {
// ...
"web:start": "webpack-dev-server --open",
"web:build": "cross-env NODE_ENV=production webpack",
"ios:init": "npm i -g react-native-cli && cross-env BABEL_ENV=native react-native run-ios",
"ios:start": "cross-env BABEL_ENV=native node ./node_modules/react-native/local-cli/cli.js start",
"ios:start-clean": "watchman watch-del-all && npm run ios:start -- --reset-cache",
// ...
},
"babel": {
"env": {
"#test": "jest env"
"test": {
"presets": [
"babel-preset-latest",
"babel-preset-stage-2",
"babel-preset-react"
]
},
"#development": "used for some scripts & web spawner"
"development": {
"presets": [
"babel-preset-latest",
"babel-preset-stage-2",
"babel-preset-react"
]
},
"production": {
"presets": [
"babel-preset-latest",
"babel-preset-stage-2",
"babel-preset-react"
]
},
"#native": "babel-preset-react-native is not required when you have no babel config, but we have some :)",
"native": {
"presets": [
"babel-preset-react-native"
]
},
"#webpack-{NODE_ENV}": "envs are defined in webpack config via BABEL_ENV",
"webpack-development": {
"presets": [
[
"babel-preset-latest",
{
"babel-preset-es2015": {
"modules": false
}
}
// ...This is really confusing.
How could we improve this?
RN: 0.34
Hey guys, this is good for people that works with mixed app types ( web/native ) and wan't share code in the same app structure . My vote to this. + I will investigate how to do this and maybe prupose a PR.
I have a similar problem with another plugin.
It works correctly if I removed lines about process.env.BABEL_ENV.
I think this global reassignment only for one module was wrong
+1
Anyone found a workaround? This would really help mixed web/native projects
2 days of my life just gone because of that :(
One annoying part of this bug is that it's not trivial to find the core issue of. In particular since the entire wrong env is being passed you might see really bizarre errors as a result of it picking up the wrong babel env.
In case that is intentional which I don't think it is, it should at least spit out a warning when the babel env is overridden.
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!
If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
- Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
- If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
- Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.
This issue is being closed because it has been inactive for a while
Let's not kill the patient just because we don't have a cure or drug handy!
This issue still definitely still exists and were waiting patiently for the team to address it. We could spam the issue with +1's, "me too"'s, and other unhelpful comments, but that would just add to the noise. Instead were waiting quietly and patiently. Please don't penalize us for being polite!
One of the workarounds for this problem can be using different packager.
At least using Haul I was able to pass custom babel env.
Another workaround that we found is to (ab)use the --projectRoots option with the React Native CLI.
The bundler will look for the .babelrc file in the first entry of this list, so:
- Create a new folder in your project root, e.g.
native-babel/, and add your React Native specific.babelrcconfig there - Use
--projectRoots <PROJECT_PATH>/native-babel,<PROJECT_PATH>when running the CLI
This uses the native-babel/.babelrc config while still using the rest of your files in the project root folder.
@hramos this is no good reason to close the issue especially when it's a bug the size of Earth. Please reopen. The issue remains, closing this doesn't make it less of an issue nor resolve it.
@JoelBesada could you elaborate a little bit on how that should be done?
I'm trying to do react-native bundle --projectRoots=<whatever> or react-native bundle --projectRoots <whatever> but it just says it cannot recognize --projectRoots parameter. Which is consistent with what react-native bundle -h shows - no such param on the list.
So I assume I'm using wrong CLI. Where do you apply that parameter?
react-native-cli: 2.0.1
react-native: 0.50.4