I'm using the latest ES8 features in my react code, for example, async and await. Because of misconfiguration problem in my webpack config, I cannot use source maps, and this slows down debugging.
A quick solution could be to locally compile source code into ES7 or ES8, and test in the latest Chrome. How can I set this in .babelrc? Here's my current .babelrc:
{
"presets": [
"react-app"
]
}
Answered here,
{
"presets": [
"react",
["env", {
"targets": {
"chrome": 67
}
}]
]
}
As of Jul 2018, the above setting would not support spread operator in objects. To enable it,
npm install --save-dev babel-plugin-transform-object-rest-spread
Use the following configuration in .babelrc:
{
"presets": [
"react",
["env", {
"targets": {
"chrome": 67
}
}]
],
"plugins": ["transform-object-rest-spread"]
}
Related
Using the official docs I've been trying to setup an optimal build config using: #babel/preset-env and core-js with a .browserslist file.
As far as I understand the docs, they say that preset-env with useBuiltins:"usage" will update the import 'core-js/stable' statement in my code, to only include the required functions.
However, no matter if I set last 1 chrome version or >1% in NL (which are considerably more and older browsers), the build file is the same size (about 3MB).
What am I missing?
I have a test repo available here: https://github.com/publicJorn/jorns-react-starter
For quick reference, the relevant files:
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": { "version": 3, "proposals": true }
}
],
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-object-rest-spread",
{
"useBuiltIns": true
}
],
["#babel/plugin-proposal-class-properties"],
["#babel/plugin-syntax-dynamic-import"],
["babel-plugin-styled-components"]
]
}
webpack part
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
.browserslistrc
> 1% in NL
ie 11
not ie < 11
index.js
import 'core-js/stable'
// etc..
If propertie useBuiltIns was usage, core-js will bundle polyfill code what you are using in project.
If useBuiltIns was entry, it will bundle polyfill code by browserslist setting. don't forget import core-js manually.
import 'core-js/stable';
import 'regenerator-runtime/runtime';
Now, usage and entry are both bundle polyfill by browser setting above #babel/core>=7.18
I'm using babel-preset-react-app via following .babelrc:
{
"presets": ["react-app"],
"plugins": [
"transform-es2015-modules-commonjs",
"transform-async-generator-functions"
]
}
I need to overwrite babel-plugin-transform-runtime options. I tried installing plugin and adding it to .babelrc in a following way:
{
"presets": ["react-app"],
"plugins": [
["babel-plugin-transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": false
}],
"transform-es2015-modules-commonjs",
"transform-async-generator-functions"
]
}
but it doesn't work for me.
Is there any way I can do it without copy and pasting entire preset to my .babelrc?
It seems that Babel doesn't currently support these sorts of overrides (see https://github.com/babel/babel/issues/8799). Fortunately I found a workaround for babel-preset-react-app. There is an undocumented option, useESModules:
['react-app', { useESModules: false }]
Here's a config using babel-plugin-react-app that works for node.js:
presets: [
['react-app', { useESModules: false }],
[
'#babel/preset-env',
{
modules: 'commonjs',
targets: {
node: 'current',
},
},
],
],
Of course, using babel-preset-react-app makes the most sense if you're using create-react-app for your client-side bundle. If you're not using create-react-app, then you could consider just using #babel/preset-react directly, in which case you wouldn't need to worry about overriding the useESModules setting.
Expected Behavior
App to load as it does on android.
Actual Behavior
Error: babelHelpers.asyncToGenerator is not a function
Environment:
OS: macOS Sierra 10.12.1
Node: 7.9.0
Yarn: 0.20.3
npm: 4.2.0
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.4069837
Check your .babelrc file. Is it including the babel transform-async-to-generator plugin? If so, remove it. The babel helpers that React Native includes do not include the helper for that transform. I'm not sure how to add it without generating a new set of helpers and including them in your build.
If that plugin is not in your babel config, maybe one of the library dependencies you are using has it.
So I use expo with my project and I had this exact same issue a few days ago, was bothering the hell out of me... ultimately fixed it by importing the library - babel-plugin-transform-async-to-generator
Here is my babelrc file for reference though:
`
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": [
"transform-async-to-bluebird",
"transform-async-to-generator",
"transform-react-jsx-source",
[
"module-resolver",
{
"root": ["./src"]
}
]
]
},
"production": {
"plugins": [
"transform-async-to-bluebird",
"transform-async-to-generator",
"transform-remove-console",
"transform-react-jsx-source",
[
"module-resolver",
{
"root": ["./src"]
}
]
]
}
}
}
`
I am developing a React-Native app, which was installed using Expo, that creates .babelrc config with this code:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Recently I have encountered 2 other libraries that require the installation of other types of babel presets named: "react-native" and "flow".
Question: How can I merge 3 presets?
add them as items to the array of presets
{
"presets": ["babel-preset-expo","react-native","flow"]
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
I'm looking for a way to completely disable generator functions transform with babel. With babel 5 there was a blacklist option, but it seems that with babel 6 there is no way to do that (at least I did not find any documentation on the official website).
My current configuration
{
"presets": [
"react",
],
"plugins": [
"transform-object-rest-spread",
]
}
Disabling it like described here https://babeljs.io/docs/plugins/transform-regenerator/ did not help.
Any ideas?
Have you tried "exclude"? Like:
{
"presets": [
["env", {
"exclude": ["transform-regenerator"]
}]
]
}
Please see https://babeljs.io/docs/plugins/preset-env/#optionsexclude for details.