nextjs ie11 Expected identifier

Question

I've been developing on Chrome, hoping that Babel simply fits my code into ie

One error occured SCRIPT1010: Expected identifier
internet explore point the error here (this file is in static/chunk).
short
{isClean:a}
long
...,e,r){"use strict";let n,i,o,s=r("dUwI"),{isClean:a}=r("zomH"),u=r("aOxJ"),c=r("wWcZ");class l extends...

And i tried to add polifills in my app.js

import 'core-js/stable' // core-js@3 not @2
import 'promise-polyfill/src/polyfill' // core-js@3 not @2
import 'whatwg-fetch'
import 'url-polyfill'
import assign from 'object-assign'
Object.assign = assign

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import "es6-shim"

But it still gives me same error

I don't know exactly why this error appears, but if Babel is translating my code correctly, this may the code in node_modules that Babel doesn't care about. But my problem is that I don't even know which module contains problem.

Tell me what i need to do to digging more. I am completely lost

And i didn't config anything with.babelric file it is default of next.js with typescript

And i tried this

<Head >
   <meta http-equiv="x-ua-compatible" content="IE=edge" />
</Head>

I just need more debug message.. to figure out the exact problem.

I'm really frustrated I've been working really hard for 3 years as a developer, but there's so much to worry about. Once these projects are resolved, I will quit the developer. ...and do more simpler job.

Add

I can open the screen with ie only after build, so I always build and start again to debug.

When i run dev mode this in nanoid module (I did not install this module on my own. And I'm not sure if this error is the same as the error I get after build.)
error point the arrow function...

let customAlphabet = (alphabet, size) => {
  return () => {

My package.json browserList

"browserslist": {
    "production": [
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

and corejs version

"core-js": "^3.9.1",

Now I am trying to delete my most of code. (and i did) but i can see same error still

Maybe this isn't a problem with the modules I've installed or the code I've written....

ADD2
No it wasn't I deleted almost every code and the error disappeared there is something in my code...

ADD3

Thanks for answer
I can read the chunk code now
ie said the problem is
in the { isClean }

(window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([[6],{

/***/ "+9U2":
/***/ (function(module, exports, __webpack_require__) {

"use strict";

let Declaration = __webpack_require__("dUwI")
>>>>>>let { isClean } = __webpack_require__("zomH")
let Comment = __webpack_require__("aOxJ")
let Node = __webpack_require__("wWcZ")

Yeah i still don't know which module is, But
But now I'm trying to remove the code line by line. I think I'll find out soon.

#Add4 I was cleaning line by line but it was circling.
my next work will using
next-transpile-modules insult every node_modules and see what happens... I put every node moudles in next-transpile-modules but reult was same let dose not changed to var

#Add5 Finally I found what module cause this problem it was 'sanitize-html' The module is not wrong. Just i didn't read the DOC properly. This is a module used in the server, but I used it in the client...

Thanks for helping me StackOverflow people..!!

Answer 1

As far as I can see, you bundle has class declarations and IE does not understand them. Polyfills won't help because you cannot polyfill such thing, it should be transpiled to compatible ES5 code. It is probably part of some library you use, so you need to use next-transpile-modules thing for NextJs to transpile node_modules code of this library.

Example of usage:

// next.config.js

// pass the modules you would like to see transpiled
const withTM = require('next-transpile-modules')(['somemodule', 'and-another']); 

module.exports = withTM();

There is also an instruction how to find which package is causing problems:

add config.optimization.minimize = false; to you next.config.js 's Webpack configuration

run a production build

run it on the browser throwing the error

open the console, jump to the line where it failed

goes a little bit up in the lines of code, and check the Webpack comments telling you which module is affected

https://github.com/martpie/next-transpile-modules#how-do-i-find-out-which-package-is-causing-a-runtime-exception

nextjs ie11 Expected identifier

Question

1 answers

solution1
2 ACCPTED 2021-03-12 09:04:20

nextjs ie11 Expected identifier

Question

1 answers

solution1 2 ACCPTED 2021-03-12 09:04:20

solution1
2 ACCPTED 2021-03-12 09:04:20