This is the error:
Uncaught ReferenceError: regeneratorRuntime is not defined
Every question I've found suggest to install a polyfill which will increase the bundle size.
Since I'm targeting latest Chrome, I want to use async/await as is. No polyfill. How to explain that to babel?
.babelrc:
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"Chrome >= 59"
]
}
}
],
"react",
"stage-0"
]
}
using chrome > 59 did not work.
Your problem is
"last 2 versions"
which tells Babel to transpile (amongst others) for IE 10.
Related
I am running a React web app inside React Native via WebView.
The website uses Object.fromEntries which doesn't appear to be available to the browswer on the device I am using and causes my webapp to crash (with no error) when I try call Object.fromEntries.
The device is running Android 8.1.0 so I assume it will be using an older Android browser that doesn't support Object.fromEntries.
In my web app babel config I am trying to target Android 8.0 but the app still crashes when Object.fromEntries gets called.
{
"presets": [
[
"#babel/preset-env",
{
"loose": true,
"modules": false,
"shippedProposals": true,
"targets": {
"Android": "8.0",
"browsers": ["last 2 version"]
}
}
],
[
"#babel/preset-react",
{
"useBuiltIns": true,
"pragma": "React.createElement"
}
],
"#babel/preset-typescript"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"#babel/plugin-syntax-dynamic-import",
"babel-plugin-macros",
[
"#babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}
Is there something else I need to include in the babel config or perhaps something that overrides it (i.e. Typescript)?
I had a similar issue when loading a webpage in an Android 8 Chrome browser. These two changes helped fix it for me:
1. Manually adding polyfills
https://github.com/es-shims/Object.fromEntries
https://github.com/facebook/create-react-app/tree/main/packages/react-app-polyfill
Add your dependencies
yarn add react-app-polyfill
yarn add object.fromentries
Then, at the root of your app (index.js), add these two imports:
import 'react-app-polyfill/stable';
import fromEntries from 'object.fromentries';
fromEntries.shim(); // will be a no-op if not needed
2. Changing the build target
I'm using create-react-app and not directly configuring babel so this may be different for you, but I changed my browserslist setting to
">0.2%",
"not dead",
"not op_mini all"
(This may not be required at all)
I was trying to convert my react project into an electron-app. As
the project is bundled via webpack, I began using electron-webpack for
the build. When running electron-webpack dev, neither the /main nor the /renderer compiles correctly.
Console logs throw Decorator plugin error
The decorators plugin requires a 'decoratorsBeforeExport' option,
whose value must be a boolean. If you want to use the
legacy decorators semantics, you can set the 'legacy: true' option
Sooo, why not following that wise suggestion?. Then, I updated all my dependencies and update my .babelrc file, for adding the decoratorsBeforeExport and the legacy option (false and true respectively)
"plugins": [
["#babel/plugin-proposal-decorators", {
"decoratorsBeforeExport": false,
"legacy": true,
}],
As the Error still showing after that, I open the plugin-proposal-decoratorsfolder from _/node_modules_ and added a log for the options. Apparently, it does not identify my options set. I tried
directly from the webpack loader config, but the problem still showing.
My env
Node: v11.2.0
Webpack: v4.29.0
#babel/core: v7.0.0
This .babelrc worked for me:
{
"presets": [
"#babel/preset-react",
[ "#babel/preset-env", {
"targets": {
"browsers": [ "last 1 version" ]
}
} ]
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
Mind how decorators plugin comes before class-properties.
Somehow, it didn't work for me in non-legacy mode. loose option is required if decorators runs in legacy mode, according to official docs: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html
It also states:
In Babel 7, transform-decorators-legacy will be the default plugin in Stage-0.
(Source: https://babeljs.io/docs/en/babel-plugin-transform-decorators.html)
More info:
Babel 7 - Decorators transform doesn't work with babel-loader
Simple ES7 decorator with babel
I am trying to configure webpack/babel 7 to transpile to the most backwards compatible code possible. But I still see things like includes and find in my code.
.babelrc
{
"presets": [
["#babel/preset-env"]
],
}
How can I tell babel to do the most it can?
From https://babeljs.io/docs/en/babel-preset-env, we can use a browser list string or target browsers individually (see below for example).
{
"presets": [
["#babel/preset-env", {
"targets" : ">0.001%"
} ]
]
}
I have a client that has employees working on older iPads and they can't update their safari versions to 10.x+ so they're stuck w/ safari 9.x. And I keep getting the following error when I try to load my browser app in Safari 9.x on an iPad:
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
I'm using babel-loader in my webpack config and I have the following babel options that I'm setting on the loader's options property:
{
presets: [
[
"env",
{
targets: {
browsers: ["last 3 versions", "safari >= 8"]
},
debug: true
}
],
// `es2015`,
`stage-1`
],
retainLines: true,
plugins: [
"syntax-jsx",
"transform-react-jsx",
"transform-react-display-name",
"transform-react-require",
"transform-es2015-destructuring",
"transform-es2015-parameters",
"transform-object-rest-spread",
"transform-class-properties",
// "check-es2015-constants",
// "transform-es2015-block-scoping",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
In my console when I do the build, it EVEN SAYS:
Using targets:
{
"chrome": "59",
"android": "4.4",
"edge": "13",
"firefox": "54",
"ie": "9",
"ios": "10",
"safari": "8"
}
And:
Using plugins:
check-es2015-constants {"android":"4.4","edge":"13","ie":"9","safari":"8"}
transform-es2015-block-scoping {"android":"4.4","edge":"13","ie":"9","safari":"8"}
But there are STILL const declarations (65 to be exact) throughout my bundle. And no, they aren't all node_module imports... Most are my own React component files.
How do I get babel to just replace ALL instances of const w/ var?
I'm on webpack 3.7.1 and babel-loader 7.1.2 and babel-core 6.26
Turns out I was using a Webpack alias for this project still: https://github.com/njl07/rx-http-request/issues/15#issue-273561398
Apparently babel transformations aren't applied to aliases for some reason.
Updated to the latest package and all is good now.
Here is my .babelrc.
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 9"]
},
"useBuiltIns": true,
"modules": false
}]
],
"plugins": ["transform-object-rest-spread", "transform-class-properties"]
}
In my code I've included the polyfill module.
import 'babel-polyfill'
Running my app in IE11 results in the following error.
SCRIPT5009: 'Promise' is undefined
When I remove "modules": false everything works fine. I thought this option simply tells webpack not to transpile ES6 into ES5 modules which is required for treeshaking.
Why do the polyfills stop working?