Create-react-app: 带有“反应脚本” v4.0.0的应用程序无法在IE11中运行

如果我没记错的话，由于配置了browserslist ，因此在开发模式下新项目根本无法在IE上运行。

（请参阅package.json ）。

@ Pierre-Do
是的，我使用缺少的信息更新了我的问题。
我忘记了开箱即用不支持IE11，但是使用react-app-polyfill无法正常工作:(

+，关于生产版本的相同问题
https://reactjs.org/docs/error-decoder.html/?invariant=31&args [] = object％20with％20keys％20％7B％24％24typeof％2C％20type％2C％20key％2C％20ref％2C ％20props％2C％20_owner％7D

我的解决方法：

import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

我也受到这个问题的影响

我可以确认@ezBill解决方案适合我。
也许react-app-polyfill需要修复？

我可以确认@ezBill解决方案适合我。

+1

解决方法对我不起作用，错误仍然存​​在。

我的polyfill看起来像这样，而IE11也没有问题：

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

请注意，这些必须高于任何其他没有适当填充的情况下都会破坏的输入。 另外，polyfill不提供其他更深奥的API，例如TextEncoder因此如果出于某些原因需要使用polyfill，您仍然需要为其加载它们。

我认为新的jsx转换会导致这种情况，请尝试通过在主index.js的顶部添加/** <strong i="5">@jsxRuntime</strong> classic */来禁用它，并在其中导入您的polyfills-或设置DISABLE_NEW_JSX_TRANSFORM=true环境变量。 就我而言，这些方法都可以解决此问题。

我的猜测是，通过首先导入polyfill可以使它们在反应之前加载，但是不能在编译器插入的import {jsx as _jsx} from 'react/jsx-runtime';行之前加载它们。

@msbarry我可以确认这可以解决此问题。 感谢您的帮助！

我们遇到了同样的问题。 不过，我们已经将许多代码库转换为新的JSX格式（不再需要导入React的格式）。

好消息！ 我们能够保留所有新的JSX语法！

我们只需要将此应用到src/index.js文件的顶部。

/** <strong i="10">@jsxRuntime</strong> classic */
import 'react-app-polyfill/ie11'

// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
// https://github.com/facebook/create-react-app/issues/9906
import React from 'react'

添加了注释，因为否则我们会看到这是人们不理解的，并且可能永远留在代码库中。

唯一的缺点是我们不必摇树来减少包的大小，这是我们首先升级到React 17的主要原因之一：(

FWIW我们将index.ts文件拆分为init.ts和main.tsx文件，其中init.ts导入所有相关的polyfills，而main.tsx是实际的入口点（包含React代码）和index.ts都按顺序导入。 这样可以确保在polyfill之后加载可能需要polyfill的所有模块，并且命名可以确保即使使用自动分类导入功能时，polyfill也要位于主入口之前。

与不必解决此问题相比，这可能是更可行的解决方案。

以上似乎都不起作用。

IE11错误

点击错误将我们带到这里

IE版本

这是一个非常简单的示例

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. 更新index.js

/** <strong i="23">@jsxRuntime</strong> classic */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>Come on</div>,
  document.getElementById('root')
);

1. 在package.json中将ie 11添加到browerslist package.json

{
  "name": "ie11app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

1. yarn start

尝试从index.js中删除import 'react-app-polyfill/stable'; 。

您只需要import 'react-app-polyfill/ie11'

看起来不像是polyfill问题。 您在调试器中看到的代码不是ES5，它使用解构和默认参数，而IE11均不支持。 尝试在browserslist使用"ie >= 11" browserslist而不是"ie 11" 。 这就是我所拥有的，不确定是否任何一种语法都应该起作用。

@ Dan503 @pluma我尝试了两种方式， "ie >= 11"和删除import 'react-app-polyfill/stable'; ，但是还是没有运气。

您能这么善良地创建一个新的npx create-react-app ie11app并检查它在IE11上是否仍然适用吗？

谢谢

更新：
恢复到"react-scripts": "^3.0.0"可以在IE 11即使有"react": "^17.0.1",
但是"react-scripts": "4.0.0"对我来说还是坏了

我也尝试了许多这样的解决方案。 唯一有效的方法是将react-scripts降级3.4.4 。