nextjs ie11 预期标识符

Question

I've been developing on Chrome, hoping that Babel simply fits my code into ie我一直在 Chrome 上开发，希望 Babel 能简单地将我的代码放入 ie

One error occured SCRIPT1010: Expected identifier出现一个错误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我试图在我的 app.js 中添加 polifills

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.我不知道为什么会出现这个错误，但是如果 Babel 正确地翻译了我的代码，这可能是 Babel 不关心的 node_modules 中的代码。 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我没有用.babelric 文件配置任何东西，它是 next.js 和 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.我真的很沮丧，作为一名开发人员，我已经努力工作了 3 年，但有很多事情要担心。 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.我只能在构建之后用ie打开屏幕，所以我总是构建并重新开始调试。

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.)当我在nanoid模块中运行开发模式时（我没有自己安装这个模块。我不确定这个错误是否与我在构建后得到的错误相同。）
error point the arrow function...错误指向箭头 function...

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

My package.json browserList我的package.json

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

and corejs version和 corejs 版本

"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添加2
No it wasn't I deleted almost every code and the error disappeared there is something in my code...不，不是我几乎删除了所有代码并且错误消失了，我的代码中有一些东西......

ADD3添加3

Thanks for answer感谢您的回答
I can read the chunk code now我现在可以阅读块代码
ie said the problem is即说问题是
in the { isClean }在{ 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. #Add4我正在逐行清洁，但它正在盘旋。
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 next-transpile-modules侮辱每个 node_modules 并看看会发生什么...我将每个节点模块都放在 next- let -modules 中，但结果相同，请不要更改为var

#Add5 Finally I found what module cause this problem it was 'sanitize-html' The module is not wrong. #Add5最后我发现是什么模块导致了这个问题它是'sanitize-html'模块没有错。 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..!!感谢您帮助我 StackOverflow 的人..!!

Answer 1

As far as I can see, you bundle has class declarations and IE does not understand them.据我所见，您捆绑了class声明，而 IE 不理解它们。 Polyfills won't help because you cannot polyfill such thing, it should be transpiled to compatible ES5 code. Polyfills 无济于事，因为你不能 polyfill 这样的东西，它应该被转换为兼容的 ES5 代码。 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.它可能是您使用的某个库的一部分，因此您需要为 NextJs 使用next-transpile-modules东西来转换该库的 node_modules 代码。

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:还有一条说明如何查找导致问题的 package：

add config.optimization.minimize = false;添加config.optimization.minimize = false; to you next.config.js 's Webpack configuration给你next.config.js的 Webpack 配置

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在代码行中稍微增加一点，并检查 Webpack 注释，告诉您哪个模块受到影响

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

nextjs ie11 预期标识符

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-03-12 09:04:20

nextjs ie11 预期标识符

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-03-12 09:04:20

解决方案1
2 已采纳 2021-03-12 09:04:20