I have a React App using Create-React-App. I've used the Map() datastructure included in ES6 in my app. However, in IE11 it does not work. Shouldn't Babel (under the hood of Create-React-App - I did not eject) take care of this?
If not, is there there any solution for that?
As others already mentioned, you are going to need a polyfill to add the functionality when it's not natively supported by the browser in question. Since you're already using Babel, the easiest way to do this is by using a Babel polyfill.
If you don't want to add another dependency, you can use the Map polyfill found here.
No.
Use babel-polyfill for cross-browser babel support:
npm install --save babel-polyfill
If you're using webpack/browserify then here's how you should incorporate the polyfill:
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
If you're still unclear, read the documentation here.
Related
I'm trying to use an NPM package called "libsodium-wrappers" inside a browser with React using Create React App, but getting the following error:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
After searching the web about this, I found that I may downgrade the "react-scripts" to version 4, but I really don't want to do this, as I will need to reinstall everything and this may break things.
Are there any working solutions to this besides the above one?
Thanks
It may be related to a component library you may be using. I came across you question while attempting to address this very same issue. I'm using react-bootstrap-table2 in a project that is causing this issue for me. I believe I may have resolved it by installing the events package (specifically for react-bootstrap-table2's needs. In this case maybe try this:
yarn add path -D
Hopefully in this case that may "bump" the needle in a positive direction for you.
Do yarn add util (alternatively, npm install util). It worked for me.
While searching online on how to use Mobx with create-react-app-typescript (using react-scripts-ts) all suggestions point out to use react-app-rewire-mobx alongside react-app-rewire in order to support decorators.
However I've just created a simple Mobx app without using react-app-rewire-mobx and all I had to do was add "experimentalDecorators": true to tsconfig.json. The app runs fine and I can use all the Mobx decorators.
So my question is am I missing something critical by not using react-app-rewire-mobx that will manifest itself as I develop the app further? Or is it literally just for the decorators support? Why is react-app-rewire-mobx needed if TypeScript has a flag that allows decorators?
Is there anything crucial that I need react-app-rewire for when using Mobx?
react-app-rewired allows to change react-scripts Webpack configuration and has a predefined set of helpers to configure Webpack loaders.
All that react-app-rewire-mobx does is configuring Babel loader to use transform-decorators-legacy plugin.
Since Babel isn't needed in TypeScript setup and isn't used in create-react-app-typescript, react-app-rewire-mobx isn't needed.
"experimentalDecorators": true in tsconfig.json is the right way to use MobX with create-react-app-typescript.
There is also react-app-rewire-typescript that allows to configure original react-scripts to use TypeScript instead of using react-scripts-ts (create-react-app-typescript) fork.
I'm using create-react-app in my project but when I try to use scss instead of css it breaks.
I have tried to install dependencies node-sass and saas-loader - still nothing.
I've also tried to change the temple for parcel but then nothing is rendered.
Can you please help and show me the way to switch to scss in this project?
https://codesandbox.io/s/5y9nr49y44
Thanks
codesandbox does not support sass compile with the create-react-app, see issue: https://github.com/CompuIves/codesandbox-client/issues/75
Using Parcel template should work, see example here: https://codesandbox.io/s/rjj38yzm14 (kudos to CompuIves)
By default create-react-app does not support using css preprocessors (such as scss, less, stylus), so your option if you really want to use .scss in your project is to eject and use a webpack loader (sass-loader) for this.
I am currently learning react and I have an app using webpack, babel and react. It seems react has two ways of writing it using either required or import. It also seems there is a lot more documentation on using import. How can I change my stack to use the import version?
The import and export statements are an ES6 standard. Right now, your setup is likely using Babel to transpile this into ES5. You can use one or the other, but import/export will soon become the standard, so adopting it is advised.
import is ES6 (or ES2015) standard. To use it, you need to install and activate the preset in babel.
Follow these steps:
Go to your project folder then type this: npm install --save-dev babel-cli babel-preset-env
Create a file named .babelrc (in case you have not created one) and insert this lines:
{
'presets': ['env', 'react']
}
I assume you have setup the webpack to work with babel.
I have a library written in ES6/JSX and want to install it using npm install on a create-react-app application. How can I force babel to parse this lib from node_modules?
Something like not ignore node_modules/my-library when transpiling.
I think your library shouldn't rely on third applications dependencies,
then it won't be useful and it will only work on projects that contain Babel as a depency.
Instead, You should add Babel to your library dependencies, and create a build of your library using babel to transpile your ES6 code to ES5 code which will result in standard javascript.
Therefore, you can easily add it to any project by importing the build.