reactjs - nextjs ie11 预期标识符

问题描述

我一直在 Chrome 上开发，希望 Babel 能简单地将我的代码放入 ie

一个错误发生SCRIPT1010: Expected identifier
互联网探索点错误在这里（这个文件是静态/块）。
短
{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...

我试图在我的 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"

但它仍然给我同样的错误

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

告诉我我需要做些什么来挖掘更多。我完全迷失了

而且我没有使用 .babelric 文件配置任何内容，它是带有 typescript 的 next.js 的默认设置

我试过这个

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

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

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

添加

我只能在构建之后用ie打开屏幕，所以我总是构建并重新开始调试。

当我在模块中运行开发模式时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
不，不是我几乎删除了所有代码并且错误消失了，我的代码中有一些东西......

添加3

感谢您的回答
我现在可以阅读块代码，
即说问题
出在{ 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'模块没有错。只是我没有正确阅读文档。这是服务器中使用的模块，但我在客户端使用它...

感谢您帮助我 StackOverflow 的人..!!

标签： reactjsbabeljsnext.jsinternet-explorer-11polyfills

据我所见，你的 bundle 有class声明，而 IE 不理解它们。Polyfills 无济于事，因为你不能 polyfill 这样的东西，它应该被转换为兼容的 ES5 代码。它可能是您使用的某个库的一部分，因此您需要为 NextJs 使用next-transpile-modules东西来转换该库的 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();

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

添加config.optimization.minimize = false;到你next.config.js的 Webpack 配置中

运行生产构建

在浏览器上运行它会抛出错误

打开控制台，跳到失败的那一行

在代码行中稍微增加一点，并检查 Webpack 注释，告诉您哪个模块受到影响

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

reactjs - nextjs ie11 预期标识符

问题描述

解决方案

推荐阅读