reactjs - 将 react 脚本升级到 4.x.x 破坏了我的应用程序

标签 reactjs react-scripts

我一直在使用 React(v16.44.0,由于依赖关系而无法升级到 v17)、react-scripts v3.4.4、Typescript (v3.9.9) 和 React-Bootstrap (v1.5.1) 开发前端应用程序几个月来,一切都很顺利。

但是,react-scripts 最近已更新到 v4,升级会破坏整个应用程序。我担心react-scripts v3 的安全问题。我还想将 Typescript 升级到 v4+,Typescript 4 和 React-scripts 3 似乎与 eslint 不兼容。各种弃用警告也在堆积。

当我启用react-scripts v4.0.3,运行npm start来启动开发服务器时,Firefox(v78.8)抛出:

"ReferenceError: SharedArrayBuffer is not defined" in "node_modules/webidl-conversions/lib/index.js:347".

显然 bootstrap 需要 webidl-conversions 。我搜索了 SharedArrayBuffer 问题,显然它需要启用额外的 header ,但我找不到如何使用 npm start 网络服务器添加它们。

[编辑:将 Firefox 升级到 v86,仍然有问题,但我还没有尝试配置它。]

如果我尝试使用 Chrome (v89),我会:

"TypeError: Cannot convert undefined or null to object" on "node_modules/whatwg-url/dist/utils.js:48"

这似乎也是 Bootstrap 所需要的。

我本身不依赖 Bootstrap,我使用 react-bootstrap 实现。不过,我对 (S)CSS 部分使用 bootstrap-scss

如果需要,我可以上传完整的堆栈跟踪。这是我的 package.json:

{
  "name": "ab-concept-backoffice",
  "version": "42.0.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "bootstrap-scss": "^4.6.0",
    "classnames": "^2.2.6",
    "date-fns": "^2.17.0",
    "filesize": "^6.1.0",
    "flux": "^4.0.1",
    "immutable": "^4.0.0-rc.12",
    "jsdom": "^16.5.1",
    "lz-string": "^1.4.4",
    "monet": "^0.9.1",
    "query-string": "^6.14.0",
    "react": "^16.14.0",
    "react-autosuggest": "^10.1.0",
    "react-bootstrap": "^1.5.1",
    "react-color": "^2.19.3",
    "react-cookie": "^4.0.3",
    "react-day-picker": "^7.4.8",
    "react-dom": "^16.14.0",
    "react-gravatar": "^2.6.3",
    "react-html5-camera-photo": "^1.5.4",
    "react-number-format": "^4.4.4",
    "react-phone-number-input": "^3.1.16",
    "react-process-string": "^1.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-select": "^4.1.0",
    "react-sketch": "^0.5.1",
    "react-three-state-checkbox": "^1.3.4"
  },
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-scripts start",
    "build": "npm version patch && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/classnames": "^2.2.11",
    "@types/humanize-duration": "^3.18.0",
    "@types/lz-string": "^1.3.34",
    "@types/md5": "^2.3.0",
    "@types/node": "^14.14.31",
    "@types/react": "^17.0.2",
    "@types/react-autosuggest": "^10.1.2",
    "@types/react-color": "^3.0.4",
    "@types/react-gravatar": "^2.6.8",
    "@types/react-phone-number-input": "^3.0.6",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-select": "^4.0.13",
    "sass": "^1.32.8",
    "typescript": "^4.2.3"
  }
}

Firefox 堆栈跟踪:

ReferenceError: SharedArrayBuffer is not defined
./node_modules/webidl-conversions/lib/index.js
node_modules/webidl-conversions/lib/index.js:347

  344 | 
  345 | const abByteLengthGetter =
  346 |     Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
> 347 | const sabByteLengthGetter =
  348 |     Object.getOwnPropertyDescriptor(SharedArrayBuffer.prototype, "byteLength").get;
  349 | 
  350 | function isNonSharedArrayBuffer(V) {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

./node_modules/whatwg-url/dist/URL.js
node_modules/whatwg-url/dist/URL.js:3
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

./node_modules/whatwg-url/webidl2js-wrapper.js
node_modules/whatwg-url/webidl2js-wrapper.js:3
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

./node_modules/whatwg-url/index.js
node_modules/whatwg-url/index.js:3
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

1
http://localhost:3000/static/js/main.chunk.js:39420:18
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

checkDeferredModules
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:45

  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 

webpackJsonpCallback
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:32

  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;

(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:95

Chrome 堆栈跟踪:

TypeError: Cannot convert undefined or null to object
./node_modules/whatwg-url/dist/utils.js
node_modules/whatwg-url/dist/utils.js:48
  45 | 
  46 | const iterInternalSymbol = Symbol("internal");
  47 | const IteratorPrototype = Object.getPrototypeOf(Object.getPrototypeOf([][Symbol.iterator]()));
> 48 | const AsyncIteratorPrototype = Object.getPrototypeOf(Object.getPrototypeOf(async function* () {}).prototype);
  49 | 
  50 | function isArrayIndexPropName(P) {
  51 |   if (typeof P !== "string") {
View compiled
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
./node_modules/whatwg-url/dist/URL.js
node_modules/whatwg-url/dist/URL.js:4
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
./node_modules/whatwg-url/webidl2js-wrapper.js
node_modules/whatwg-url/webidl2js-wrapper.js:3
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
./node_modules/whatwg-url/index.js
node_modules/whatwg-url/index.js:3
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
▶ 2 stack frames were collapsed.
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
fn
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:39420:18
__webpack_require__
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:856
  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }
View compiled
checkDeferredModules
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/home/vion/workspace/ab-concept-frontend/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:95

最佳答案

如果没有完整的package.json,很难准确判断,但似乎它与react-scripts本身的更新无关,而可能是升级在您依赖的另一个使用 SharedArrayBuffer 的库上 is not supported in Firefox v78

编辑:OP发现problematic package was react-sketch

根据另一个错误,它似乎是相关的,但不知道为什么会发生。无论如何,找到了this issue在他们的 Github 页面中,一个建议是 upgrade jsdom to version >=16.3 (如果您正在使用它)

关于reactjs - 将 react 脚本升级到 4.x.x 破坏了我的应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66528127/

相关文章:

javascript - Material-UI TableCell-root 中 padding-right 40px 是什么原因

mysql - 如果我只编辑一个输入字段,为什么我的可编辑输入字段会提交空字符串?

javascript - 在 React/Javascript 中查找 Map 的第一个迭代

reactjs - 如何测试由在 useEffect 上触发的 SetTimeout 修改的组件样式?

rust - worker-loader 不能在 react 项目中使用 wasm-loader 和 typescript

reactjs - 在 React 中,你可以改变 this.state 但后面跟着一个 this.setState() 吗?

reactjs - React 脚本启动给出了 Unexpected token 错误

javascript - 运行 react-scripts start 后如何停止?

javascript - 我应该在哪里存储我的 React 可重用组件?

github - 运行 npm start 命令行后不起作用