How to make IE 11 compatible with Next.js ?

[karimilaghab]

Hi guys, I'm using Next.js 9.4.0 for my project. I have tested it successfully in Chrome, Edge, Safari without any major issues. However, in IE11 I've got a Syntax error in Console as follows:
"Error was not caught SyntaxError: Syntax error."

To tackle this error, I've tried using the polyfill and babel as follows, but it didn't work:

in .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  },
  "plugins": [
    "lodash",
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

in package.json: (Dependency):

"@babel/polyfill": "7.10.1",
 "@babel/preset-typescript": "^7.6.0",
"babel-core": "^6.26.3",
 "babel-polyfill": "^6.26.0",
 "core-js": "3.6.5",
 "react-app-polyfill": "^1.0.6",

(devDependency):

"@babel/core": "^7.10.2",
 "@babel/preset-env": "^7.10.2",
 "@babel/preset-react": "^7.10.2",
 "@babel/plugin-proposal-class-properties": "^7.2.3",
 "@babel/plugin-proposal-decorators": "^7.2.3",
 "babel-loader": "^8.1.0",
 "babel-plugin-lodash": "^3.3.4",
 "babel-plugin-styled-components": "^1.10.0",

And I imported following on top of my _app.tsx file:

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import "core-js/stable";

I get this error in console when using localhost:

Any idea or suggestion is appreciated.
Thanks

[karimilaghab]

@jamesmosier
@timneutkens

[jamesmosier]

This doesn’t appear to be an issue of polyfills, rather you have a node module that is not transpiled. Since IE11 cannot read ES6 syntax, you’ll need to transpile the node_module that is causing this issue. As far as what node_module it is, it is hard to say. You’ll have to do some trial and error testing to find it.

There is a community plugin for this: https://github.com/martpie/next-transpile-modules

[karimilaghab]

Thanks @jamesmosier