0

I’m building an app which uses React(v.17.0), Next.js(v11.1.2), … and other stacks.

Next.js probably, in default, supports IE11.

After I added some packages to my project, it fails on IE11. It says, in console, spread operator is not supported and some other stuff.

I guess the reason is packages which occur problems doesn’t properly set up. For example, packages are built in typescript but they don’t specify tsconfig.compilerOptions.target to es5. I looked it up the source.

I have tried

  1. Adding react-app-polyfill/ie11 in pages/_app.js

Should I try…

  1. Contribute each packages so that it can be compatible with IE11.

  2. Webpack or babel setting: I’ve never done custom webpack or babel settings before. I always go with the default settings. I haven’t tried this because I know webpack and babel affects project source but not sure it ALSO affects dependent packages.

loone96
  • 723
  • 2
  • 13
  • 21

1 Answers1

0

As you mentioned, the spread operator does not work correctly in IE. This is because it is part of ES6 and IE does not support this feature. You can view the browser compatibility table from this doc：Spread syntax (...)-Browser compatibility.

So you may need to convert it to ES5, usually you can use transpilers like Babel, simple configuration example:

{
 test: /\.js$/, //Regular expression 
 exclude: /(node_modules|bower_components)/,//excluded node_modules 
 use: {
 loader: "babel-loader", 
 options: {
   presets: ["@babel/preset-env"]  //Preset used for env setup
  }
 }
}

Another option is to define your own function according to the situation.

Xudong Peng
  • 1,463
  • 1
  • 4
  • 9
  • Thank you for your answer! Should I include node_modules in my case? The problem is happening in the library that I imported. – loone96 Sep 09 '21 at 11:22
  • I found that you mentioned that `tsconfig.compilerOptions.target` is not set to es5 in the project. I think this may be the cause of the problem. You can refer to [this case](https://stackoverflow.com/questions/42415942/what-is-target-in-tsconfig-json-for) appropriately. So you can set this property to `es5` for testing, or you also can try to use babel to translate es6 to es5. – Xudong Peng Sep 10 '21 at 07:29