Razzle: IE 11 : webpackHotDevClient로 손상되었습니다.

이제 create-react-app이 기본적으로 더 이상 별도의 패키지로 옵트 인 이 있다는 것을 알고

이제 v3 용으로 업데이트 된 polyfill 에

그러나 이것이 문제를 해결한다고 생각하지 않습니다. 비슷한 것이 CRA에서 추적되고있는 것으로 보입니다 : https://github.com/facebook/create-react-app/issues/5336. 그것은 Map 정의되지 않은 것과 관련이 있으며, 이는 polyfill로 고정 가능한 것으로 이해 될 것입니다.

IE 9-11 지원에 관한이 모든 것은 폴리 필링에 관한 것입니다. polyfill이 화살표 기능을 수정할 수 있다고 생각하지 않습니다. 코드는 이전 브라우저 용으로 변환되지 않았으며 종속성 자체를 업데이트하지 않고는 어떻게 수정할 수 있는지 알 수 없습니다.

이것은 또한 ansi-regex , strip-ansi , 일부 기타 문제입니다. 파일에 react-dev-utils (포함 formatWebpackMessages.js 및 기타) chalk 에 의해 요구되는 파일 react-dev-utils . 나는 react-dev-utils에 익숙하지 않기 때문에 이것이 버그인지 또는이 항목이 번들에 포함되지 않아야하는지 또는 무엇인지 확실하지 않습니다.

여기서 해결해야 할 두 가지 사항이 있습니다.

1. Polyfill은 더 이상 기본적으로 제공되지 않습니다 (CRA2에서도 동일 함). Polyfill은 Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc와 관련된 문제를 해결합니다. react-app-polyfill 부터 특정 앱에 필요한 특정 core-js 폴리 필 요구에 이르기까지이를 처리하는 데는 12 가지 방법이 있습니다. Babel 자체가 적절한 구성으로 코드에 필요한 core-js 폴리 필을 파악하는 데 도움이 될 수 있다고 생각합니다 (여기에 문제가있을 수 있습니까? 왜 CRA2가이 경로를 사용하지 않았는지 잘 모르겠습니다).

2. 일부 라이브러리 작성자는 더 이상 모듈의 es5 버전 ( ansi-regex , react-dev-utils 등)을 배포하지 않습니다. IE11이 뚱뚱한 화살에 질식하는 것을 본다면 이것은 당신이 직면 한 문제입니다. CRA2는 node_modules ( CRA2의 webpack conf )를 하여 컴파일하려는 특정 node_modules 를 있습니다 .

IE 11에서 작동하도록 변경하는 데 필요한 사항을 여전히 얻지 못합니다. 이제 전체 프로덕션 번들에도 const 및 화살표 기능이 포함되어 있습니다.
축소 된 번들을보고 어떤 모듈이 트랜스 파일이 필요한지 알아 내야합니까? 안타깝 네요, 더 접근하기 쉬운 방법이 있나요?

이것은 나를 위해 일하는 것을 얻었습니다.

https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment -483928457

좀 짜증나

아래에 따라 문제를 해결할 수 있습니다.
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

아래 browserlist로 package.json을 업데이트하여 IE에서 작동하도록합니다.

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "last 2 ie version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 2 ie version"
    ]
  },

이렇게하면 const & arrow 함수없이 최소한 코드를 준수 할 수 있지만, 그 후 webpackHotDevClient에 갇혀서 콘솔에서 깨지기 시작하고 단서도 얻지 못합니다.

이 문제에 대해 많은 해결책을 시도했습니다.
제공된 솔루션 중 어느 것도 IE11 또는 Edge에서 개발 중이 아닙니다.
IE 버전 : 11.864.17763.0

아래는 내 패키지 json 파일입니다.

{
"name": "typescript_tutorial",
"버전": "0.1.0",
"private": 참,
"종속성": {
"@ testing-library / jest-dom": "^ 4.2.4",
"@ testing-library / react": "^ 9.4.0",
"@ testing-library / user-event": "^ 7.2.1",
"@ types / jest": "^ 24.0.25",
"@ types / node": "^ 12.12.24",
"@ types / react": "^ 16.9.17",
"@ types / react-dom": "^ 16.9.4",
"반응": "^ 16.12.0",
"react-app-polyfill": "^ 1.0.5",
"react-dom": "^ 16.12.0",
"반응 스크립트": "3.3.0",
"typescript": "^ 3.7.4"
},
"스크립트": {
"start": "반응 스크립트 시작",
"build": "반응 스크립트 빌드",
"test": "반응 스크립트 테스트",
"eject": "반응 스크립트 꺼내기"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"생산": [
"> 0.2 %",
"죽지 않았다",
"op_mini 모두 아님"
],
"개발": [
"> 0.2 %",
"죽지 않았다",
"op_mini 모두 아님",
"최근 1 개의 크롬 버전",
"최근 1 개의 Firefox 버전",
"최근 1 개의 사파리 버전",
"최근 2 개 IE 버전"
]
},
"devDependencies": {
"eslint-config-airbnb": "^ 18.0.1",
"eslint-config-prettier": "^ 6.9.0",
"eslint-plugin-import": "^ 2.18.2",
"eslint-plugin-jsx-a11y": "^ 6.2.3",
"eslint-plugin-prettier": "^ 3.1.2",
"eslint-plugin-react": "^ 7.14.3",
"eslint-plugin-react-hooks": "^ 1.7.0",
"node-sass": "^ 4.13.0",
"예쁜": "^ 1.19.1"
}
}

이 문제에 대한 내 솔루션은 다음과 같습니다 (Windows에서는 경로에 \ 구분 기호가 필요하지만 Linux에서는 / -정규식에서 고려 됨).

razzle.config.js :

'use strict';

// The list was taken from
// https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment-483928457
// the regex is changed to work both on Windows and Linux
const ieRule = {
    test: /\.jsx?$/,
    include: new RegExp(
        `node_modules[/|\\\\](?=(${[
            'acorn-jsx',
            'estree-walker',
            'regexpu-core',
            'unicode-match-property-ecmascript',
            'unicode-match-property-value-ecmascript',
            'react-dev-utils',
            'ansi\-styles',
            'ansi-regex',
            'chalk',
            'strip-ansi'
        ].join('|')}))`
    ),
    use: {
        loader: "babel-loader",
        options: {
            presets: [["@babel/preset-env", { targets: { ie: 11 } }]]
        }
    }
};

module.exports = {
    modify: (config, { target, dev }, webpack) => {
        // full config https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfig.js

        config.module.rules.unshift(ieRule);

        return config;
    },
};

.babelrc :

{
  "presets": [
    [
      "razzle/babel",
      {
        "targets": {
          "browsers": [
            "ie 11",
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions"
          ]
        }
      }
    ]
  ]
}

또한 IE 11에는 다음과 같은 몇 가지 추가 오류가 있습니다.

SecurityError
제공 한 오류에 스택 추적이 없습니다.
호환되지 않는 SockJS! 기본 사이트는 '1.3.0', iframe : '1.4.0'을 사용합니다.

여기에 언급 된대로 Windows 레지스트리를 편집하여 해결되었습니다.
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

즉 내가 만든

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      Microsoft
         Internet Explorer
            Main
               FeatureControl
                  FEATURE_WEBSOCKET_MAXCONNECTIONSPERSERVER
                     iexplore.exe = (DWORD) 0x0000014 (20)

페이지 당 허용되는 웹 소켓 수를 늘립니다. 그 후 문제가 덜 자주 나타났습니다 (거의 불편 함없이 디버그하기에 충분하지만 다시 나타나면 다른 탭을 열고 현재 탭을 닫아야합니다).

나는 며칠 동안 이것을보고 마침내 해결 방법을 얻었습니다.

WebpackDevServer의 클라이언트를 react-dev-utils / webpackHotDevClient에서 webpack / hot / dev-server의 대안으로 변경해야했습니다.

webpack.config.js 파일로 이동하여 다음 줄을 교체해야합니다.

isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),

이것으로 :

isEnvDevelopment && require.resolve('webpack/hot/dev-server'),

@ a1g0rithm 이것은 나를 위해 일합니다.

@ a1g0rithm webpack.config.js를 어디서 찾았습니까?

@ a1g0rithm에서 제공 하는 도움 이 된 유일한 솔루션 입니다. webpack.dev.config 파일에는 다음 메시지가 포함됩니다.

entry: [
    // ...
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    require.resolve('react-dev-utils/webpackHotDevClient'),

처음 두 require.resolve 의 주석 처리를 제거하고 마지막 주석은 주석 처리하십시오.

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
// require.resolve('react-dev-utils/webpackHotDevClient'),

나는 이것이 개발중인 클라이언트 웹팩을 가져온 나쁜 가져 오기라고 생각합니다. v4에서 수정 됨