solution for Next Js in IE11 after add Polyfills

[anwer-kalghoum]

Question about Next.js in IE11

I added Polyfills in my project nextjs, but all the scripts js are not functional in IE11 (internet explorer):
https://github.com/zeit/next.js/tree/canary/examples/with-polyfills

// polyfills.js
/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import includes from 'core-js/es/string/virtual/includes';
import repeat from 'core-js/es/string/virtual/repeat';
import assign from 'core-js/es/object/assign';
// add your polyfills
// This files runs at the very beginning (even before React and Next.js core)
console.log('Load your polyfills');
String.prototype.includes = includes;
String.prototype.repeat = repeat;
Object.assign = assign;

---

// next.confg.js
`require('dotenv').config();
const path = require('path');
const Dotenv = require('dotenv-webpack');
const withCSS = require('@zeit/next-css');
console.log(__dirname);
module.exports = withCSS({
cssLoaderOptions: {
url: false,
},
distDir: '../build',
pageExtensions: ['jsx', 'js'],
webpack: config => {
const originalEntry = config.entry;
config.entry = async () => {
const entries = await originalEntry();

  if (entries['main.js'] && !entries['main.js'].includes('./client/polyfills.js')) {
    entries['main.js'].unshift('./client/polyfills.js');
  }

  return entries;
};

config.module.rules.push({
  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 100000,
    },
  },
});
config.plugins = config.plugins || [];
config.plugins = [
  ...config.plugins,

  // Read the .env file
  new Dotenv({
    path: path.join(__dirname, '.env'),
    systemvars: true,
  }),
];

return config;

},
});
`

[timneutkens]

Going to close this as it doesn't follow the issue template.

[dineshmatta]

Hi @anwar-kalghoum

I am also facing issue on IE 11, my Next.js site doesn't work in this browser. So did you got it working with your polyfill in IE, if Yes, could you please share the approach which you took.

Thanks

[mattdell]

Interesting timing. I also just started getting issues with IE11 on my site today.

[haleybarlar]

Hi anyone find a solution to this?

[dineshmatta]

Hi @mattdell @haleybarlar

I made following changes in my Next.js typescript project and that worked, as per Next.js docs it supports IE11 browser but for external npm modules when you use it in your Next.js project, you have to add polyfill for those manually

.babelrc

            {
                "transform-runtime": {
                    "useESModules": false
                },
                "preset-env": {
                    "targets": {
                        "browsers": [">0.03%"]
                    },
                    "useBuiltIns": "usage",
                    "corejs": 2
                }
            }
        ]

next.config.js

+const withTM = require("next-transpile-modules");

+module.exports = withTM(withBundleAnalyzer(withCSS(withSass({
    // Unshift polyfills in main entrypoint.
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js']) {
        entries['main.js'].unshift('./client/polyfills.js');
      }
      return entries;
    };   
    
    config.module.rules.push({
      test: [
        path.resolve('./node_modules/pelmorex-microservices-common/lib/logging/logger.js')
      ],
      loader: 'babel-loader',
      options: {
        babelrc: false,
        cacheDirectory: true,
        presets: ['@babel/preset-env'],
      },
    });

  transpileModules: [
    "express-http-context",
    "ip-regex",
    "is-ip",
    "logform",
    "winston-transport",
    "triple-beam",
    "intersection-observer-polyfill",
    "react-intersection-observer"
  ],

+}))));

package.json

    "babel-polyfill": "^6.26.0",
    "intersection-observer": "^0.7.0",
    "next-transpile-modules": "^2.3.1",
    "react-intersection-observer": "^8.24.2",

Added new file - src/client/polyfill.js

[/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import 'babel-polyfill';
import 'intersection-observer';

import includes from 'core-js/library/fn/string/virtual/includes';
import repeat from 'core-js/library/fn/string/virtual/repeat';
import assign from 'core-js/library/fn/object/assign';

// Add your polyfills
// This files runs at the very beginning (even before React and Next.js core)
// console.log('Load your polyfills');

String.prototype.includes = includes;
String.prototype.repeat = repeat;
Object.assign = assign;](url)

[haleybarlar]

Great thanks a ton @dineshmatta

[erango]

In my case, the culprit was an incompatible 3rd party package, a really old version of next-i18next

[nicospoke]

@erango how did you debug this to know this package was the issue?

[timneutkens]

Most of the above polyfills are not needed currently.

On top of that this will replace the need for it: #10212

[shakesBeardZ]

@timneutkens It's merged now? I mean is it available in the latest version of nextjs?

[Timer]

@shakesBeardZ it's available on next@canary.

[dawsbot]

@Timer It's fixed in next@canary, and do we need to set any experimental flags to enable this? Shipping to prod to see if IE11 folks get a working site 🤞

[Timer]

Nope, you only need to upgrade to next@canary! No experimental flags required.

[dawsbot]

EDIT: I published a reproducible demo at https://github.com/dawsbot/with-polyfills-app

---

@Timer After an update to next@9.2.3-canary.24, we're seeing the following regex error in IE11 on Windows 10. We get a full white screen

When running yarn dev:

Potential Solutions

Something similar was listed in core-js here, which I knew next.js consumes core-js in some parts of its polyfills

Is this the correct place to report this? I want to follow your guidelines because y'all handle a massive amount of incoming message and bug reports 🙏

[Timer]

@dawsbot can you please provide a reproducible demo? We have integration tests for IE11 that are currently passing!

[dawsbot]

@Timer I reproduced it in the Nextjs examples! It happens when you try to use a polyfill of just import 'corejs' in client/polyfills.js. Download and run the full example at https://github.com/dawsbot/with-polyfills-app which works in all browsers except IE11

[lgh06]

same syntax error in regexp issue with @dawsbot on IE 11
my error reports from @next/polyfill-nomodule

[timneutkens]

@dawsbot I assume that double-triggers core-js related things, as said adding that core-js import is not needed as Next.js 9.3 will automatically load all polyfills needed for IE11, see this list: https://github.com/zeit/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js

Importing core-js like you're showing will cause all of core-js to be included in the main bundle for all browsers including modern ones.

[timneutkens]

@GianfrancoCorrea your comment is not actionable. Please provide a reproduction.

[dawsbot]

@timneutkens

@dawsbot I assume that double-triggers core-js related things, as said adding that core-js import is not needed as Next.js 9.3 will automatically load all polyfills needed for IE11, see this list: https://github.com/zeit/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js

Importing core-js like you're showing will cause all of core-js to be included in the main bundle for all browsers including modern ones.

I understand that importing all of core-js is not elegant, and it seems to even be an error in the eyes of the Zeit team. Unfortunately, I have not found other methods to make our application work on older browsers, and my understanding of the transpiling/bundling system in Nextjs is quite elementary. To my defense, even the polyfilling system packaged in Nextjs has changed the last few weeks (March 2020)

With this said, there is a community response here where SOME of us are still breaking IE11, and whether that's on us or NextJS, we're stumped and are reaching out for help. I'm not sure what else to try, but SOME polyfills are required in our app and picking out each one individually from core-js was leaving us with production errors over-and-over

[timneutkens]

and it seems to even be an error in the eyes of the Zeit team.

I'm just saying that you're sending bloated JavaScript bundles to all your users if you take that approach. Basically the polyfills that you load "just importing core-js" will be 2x the size of ReactDOM

I'm not sure what else to try

Providing a reproduction that can be looked into that doesn't use the polyfills example would be a start. Note the provided example is just showing you adding all polyfills, not which polyfills are missing.

[dawsbot]

Understood, thanks for the issue support on this @timneutkens . I've created an issue report for one polyfill problem we're having since removing import 'core-js': #11173

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.