nextjs ie11 预期标识符

Question

我一直在 Chrome 上开发，希望 Babel 能简单地适合我的代码，即

出现一个错误SCRIPT1010: Expected identifier
Internet Explore 将错误指向此处（此文件位于 static/chunk）。
短
{isClean:a}
长
...,e,r){"use strict";let n,i,o,s=r("dUwI"),{isClean:a}=r("zomH"),u=r("aOxJ"),c=r("wWcZ");class l extends...

我尝试添加 polifills 在我的 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"

但它仍然给我同样的错误

我不知道为什么会出现这个错误，但如果 Babel 正确地翻译了我的代码，这可能是 Babel 不关心的 node_modules 中的代码。但是我的问题是我什至不知道哪个模块有问题。

告诉我我需要做什么才能挖掘更多。我完全迷路了

而且我没有用 .babelric 文件配置任何东西它是默认的 next.js 和 typescript

我试过了

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

我只需要更多调试消息.. 来找出确切的问题。

我真的很沮丧，作为一名开发人员，我已经努力工作了 3 年，但有太多事情要担心。一旦解决了这些项目，我将退出开发人员。 ...并做更简单的工作。

添加

我是build后才能用ie打开屏幕，所以我总是build然后重新开始debug。

当我运行在 nanoid 模块中开发模式时（我没有自己安装这个模块。我不确定这个错误是否与我在构建后得到的错误相同。）
错误点箭头函数...

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

我的 package.json 浏览器列表

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

和 corejs 版本

"core-js": "^3.9.1",

现在我正在尝试删除我的大部分代码。（我做到了）但我仍然可以看到同样的错误

也许这不是我安装的模块或我编写的代码的问题....

ADD2
不，不是我删除了几乎所有代码，错误就消失了我的代码中有一些东西...

ADD3

感谢回答
我现在可以阅读块代码了
即表示问题是
在 { 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")

是的，我仍然不知道哪个模块是，但是
但现在我试图逐行删除代码。我想我很快就会知道了。

#Add4 我是一行一行地清扫，结果它在转圈圈。
我的下一部作品将使用
next-transpile-modules 每隔 node_modules 侮辱一次，看看会发生什么...... 我把每个节点模块都放在 next-transpile-modules 但结果是一样的 let 未更改为 var

#Add5 最后我找到了导致这个问题的模块 'sanitize-html' 模块没有错。只是我没有正确阅读文档。这是服务端用的模块，我用在客户端...

感谢帮助我的 Whosebug 人员..!!

Answer 1

据我所知，您的捆绑包有 class 声明，而 IE 不理解它们。 Polyfills 不会有帮助，因为你不能 polyfill 这样的东西，它应该被转换成兼容的 ES5 代码。它可能是您使用的某些库的一部分，因此您需要使用 next-transpile-modules 东西让 NextJs 转译该库的 node_modules 代码。

用法示例：

// next.config.js

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

module.exports = withTM();

还有一个说明如何找到导致问题的软件包：

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 预期标识符

nextjs ie11 Expected identifier

polyfills

internet-explorer-11

reactjs

babeljs

next.js