Create-react-app: `react-scripts` v4.0.0이있는 앱은 IE11에서 작동하지 않습니다.

내가 착각하지 않으면 browserslist 구성으로 인해 개발 모드에서 새 프로젝트가 IE에서 전혀 작동하지 않습니다.

( package.json ).

피에르도
예, 누락 된 정보로 문제를 업데이트했습니다.
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은 TextEncoder 와 같은 더 많은 난해한 API를 제공하지 않으므로 어떤 이유로 필요한 경우 polyfill을로드해야합니다.

새로운 jsx 변환이이 문제의 원인이라고 생각합니다. polyfill을 가져 오는 주 index.js 상단에 /** <strong i="5">@jsxRuntime</strong> classic */ 을 추가하거나 DISABLE_NEW_JSX_TRANSFORM=true 환경 변수를 설정하여 비활성화하십시오. 제 경우에는 둘 중 하나가이 문제를 해결합니다.

내 생각 엔 폴리 필을 먼저 가져 오면 반응하기 전에로드 할 수 있지만 컴파일러가 삽입하는 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 모든 관련 폴리 필을 가져오고 main.tsx 는 실제 진입 점입니다 ( React 코드 포함) 및 index.ts 는 둘 다 순서대로 가져옵니다. 이렇게하면 폴리 필이 적용되어야하는 모든 모듈이 폴리 필 후에로드되고 이름 지정을 통해 가져 오기의 자동 정렬을 사용할 때도 폴리 필이 기본 진입 점 앞에 오도록 보장합니다.

이 문제를 해결하는 것보다 더 실행 가능한 솔루션 일 수 있습니다.

위의 어느 것도 작동하지 않는 것 같습니다.

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. 추가 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에서 지원하지 않는 비 구조화 및 기본 인수를 사용합니다. 사용해보십시오 "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 로 다운 그레이드하는 것입니다.