I have created a simple application with react 16.2.0 and when I execute/run it on IE9 it shows me console error 'Set' or 'Map' is undefined.
I have found that there are some polyfills require to run my react application on IE9. I followed following steps and it worked for me. As React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.
We also have to use requestAnimationFrame polyfill library which is raf
npm install --save raf
index.js
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'raf/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
You should have to find and add pollyfills for set and map as well if it's not working.
Related
I am trying to import Swiper for react in to my application and use it in Storybook.
I have the following import:
import { Swiper, SwiperSlide } from 'swiper/react';
This works in the React app but not in Storybook, I get the following error:
ModuleNotFoundError: Module not found: Error: Can't resolve 'swiper/react'
Other React modules have import without a problem. Do I need to change some configuration in Storybook?
Swiper v7+ uses ESM module. To make it work with storybook, you have to update storybook to use webpack5 instead of the default webpack4. Also ensure that your current node version must be equal or higher than 12.20, 14.13 or 16. These are versions that support ESM module.
In my case, I also delete addons #storybook/react line in .storybook/main.js as it still uses webpack4 and raises configuration Validation Error. After that it runs fine.
Full instruction
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
https://storybook.js.org/blog/storybook-for-webpack-5/
I have a Next.js app with several pages in it. All of the pages look similar.
import React, { Component } from "react";
import from "components/Wrapper";
export default class About extends Component {
render() {
return <Wrapper />;
}
}
I would like to refactor it using functional component.
I read here that you don't have to import react package here in a page due to next.js routing system. Next.js docs also show examples without react import on a page component, but no explanation given.
Can you clarify please. Is it necessary to import React at all in this case? Can I remove the import React line?
Well, actually it is still a complicated issue for all of us to realise when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:
Next.js automatically adds the React import when JSX is used indeed. However, keep in mind that we still need to import React from 'react' when the React variable is used.
So this will show us, that whenever we want to use the JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case, we have to do that.
Update
Since the release of react v17.*.*, there is no need to import React from 'react' to use only JSX in the React and CRA apps, but you still need to import it for the usage of the hooks and other compartments that React offers with destructured named imports.
NPM libraries/packages
Though you will still need it if you want to create an npm package with react because under the hood it is the react-scripts job to do the automatic imports and babel or rollup won't do this on their own and they've just transpile the provided code. Keep in mind even in this case the usage of import React from 'react' is discouraged because the support will be dropped in the upcoming versions, so it is highly recommended to use import * as React from 'react' in these cases.
i can not let react support ie , ie brower console display Unhandled promise rejection TypeError: Network request failed
i use react create my app , the app does not ie brower, i try to solve the isse,i try to import whatwg-fetch,i am fail.i do not how to do solve ie brower problem.
import "whatwg-fetch";
import "#babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
ReactDOM.render(<App />, document.getElementById('root'));
i hope you can help me.
If you mean that your app is working on other browsers but it is showing the above mentioned error only in IE browser and app not loading than it can be possible that you did not added the correct polyfills for IE browser.
By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use react-app-polyfill.
you did not mentioned, which version of IE browser you are using for making this test. I assume that you are using IE 11.
First, install the package using Yarn or npm:
npm install react-app-polyfill
//or
yarn add react-app-polyfill
For IE11:
// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
// ...
Also try to add line below in your HTML file.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I have created a new reactjs project using create-react-app and am finding it's not working on IE10 & IE9. I have done a lot of research and it led me to using polyfills, which I have done with many of my other Rails on React app, but I'm finding it not working with this project created via create-react-app.
Here's the error:
SCRIPT5009: 'Map' is undefined
I notice this error is related to ES6's new Map() function.
So, here's what I've done in my code in an attempt to make it work:
import './polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
const app = (
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
);
ReactDOM.render(app, document.getElementById('root'));
Polyfill.js:
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/object/assign';
This isn't working. I'm not sure what else to try. I've tried a lot of other polyfill imports as well and continue to get the same error.
Any help would be appreciated!
So, seeing as though create-react-app is what's restricting me from controlling the webpack config, I decided to take a different approach and build a fresh react app using webpack 4. I followed this article, https://dev.to/saigowthamr/how-to-create-a-react-app-from-scratch-using-webpack-4-1909.
This allowed me more control over the webpack config and now the polyfill loaders are working.
Nevertheless, if anyone has an explanation as to why it wasn't working with create-react-app, I think it'd be helpful for the community to know.
Thanks!
I built an application using jhipster v5.3.4 choosing React option for frontend. It works fine with Edge and Chrome but renders a blank page on Internet Explorer 11.
I've read the solution is install and include babel-polyfill but I´m not sure how to do this.
What I've done:
npm install --save-dev babel-polyfill
At the top of index.tsx, add import babelPolyfill from 'babel-polyfill';
The result is the same, blank page and console error: "Symbol is undefined"
Finally the answer to make it works is:
import React from 'react';
import ReactDOM from 'react-dom';
import 'babel-polyfill';