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)
Related
I am new to Babel+Webpack and have some confusion regarding .babelrc configuration.
FIRST CONFIGURATION
{
"presets": [
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"targets": "> 0.25%, not dead",
"corejs": {
"version": 3,
"proposals": true
}
}
]
],
"plugins": [
"#babel/transform-runtime"
]
}
SECOND CONFIGURATION:
{
"presets": [
[
"#babel/env",
{
"modules": false,
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime", //target environment are not supported
{
"corejs": 3,
"helpers": true,
"regenerator": true
}
]
]
}
Facts that are true for second configuration's are:
Increased bundle size
Core-js-pure will include ponyfills that will not pollute global environment.
My question is we are going to export a "umd" library for public use with a Library Name "XYZ" and i am confused which of the above settings are suitable as one thing really confuse me is that if the bundle i.e created at the end is minified and built completely on esm pattern(use-strict mode) and for public use they can access like "XYZ.method()", then how the second configuration is suitable and it stop polluting global namespace.
Can anyone explain me with an example and help me clearing this concept?
For libraries Rollup is a much better option than WebPack.
This a good starting point.
https://github.com/rollup/rollup-starter-lib
If you must use webpack, avoid using regenerater, as it adds a lot of bloat to the output of Babel, if you code needs it, then the consuming app should include it, so you don’t end up having it twice in the end app
Ran into this myself, in the past. Honestly, Webpack is terrible with anything that exports more than a single default, which is why you see most libraries use Rollup or Parcel for bundling.
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'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"]
}
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.
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"]
}
]
]
}
}
}
`