On some browsers only i get the

Uncaught ReferenceError: Set is not defined.

It is reactjs app created with create-react-app.

Why do i still get the error?
How do i use polyfill?
Does not reactjs use polyfill by default?

webpack.config.prod.js

entry: [require.resolve('./polyfills'), paths.appIndexJs],

polyfills.js

'use strict';

if (typeof Promise === 'undefined') {
  // Rejection tracking prevents a mon issue where React gets into an
  // inconsistent state due to an error, but it gets swallowed by a Promise,
  // and the user has no idea what causes React's erratic future behavior.
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

// fetch() polyfill for making API calls.
require('whatwg-fetch');

// Object.assign() is monly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
  require('raf').polyfill(global);
}

On some browsers only i get the

Uncaught ReferenceError: Set is not defined.

It is reactjs app created with create-react-app.

Why do i still get the error?
How do i use polyfill?
Does not reactjs use polyfill by default?

webpack.config.prod.js

entry: [require.resolve('./polyfills'), paths.appIndexJs],

polyfills.js

'use strict';

if (typeof Promise === 'undefined') {
  // Rejection tracking prevents a mon issue where React gets into an
  // inconsistent state due to an error, but it gets swallowed by a Promise,
  // and the user has no idea what causes React's erratic future behavior.
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

// fetch() polyfill for making API calls.
require('whatwg-fetch');

// Object.assign() is monly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
  require('raf').polyfill(global);
}

• javascript
• reactjs

• It seems we need to use import 'babel-polyfill' on our reacttjs ponents which needs polyfill. But why should we? Cant the babel loader handle it? – Mahesh Commented Jan 12, 2018 at 5:04
• I see this error on some Chrome/Android browsers even though I have Set polyfilled with https://cdn.polyfill.io/v2/polyfill.min.js?features=...,Set,Map"></script> – mikebridge Commented Apr 13, 2018 at 20:47

3 Answers 3

No sure whether anyone found the right solution. However for older browser especially on Android Kitkat 4.4 browsers/webview this problem is very evident. Please use the following link for the solution

https://reactjs/docs/javascript-environment-requirements.html

If you are using ReactJS 16 then first include the babel-polyfill

• npm install --save babel-polyfill

Open your index.js and import the babel-polyfill

• import 'babel-polyfill'

Create a build and deploy. This should solve the issue.

I face the same issue while working on my React project. So I just install babel-polyfill package. Its working fine now.

Seems to be an issue with older WebView that doesn't support ES6.
I faced this issue on Genymotion (Android API 21), where it somehow did not work even after updating Chrome.
But it worked on physical device.