Обновление сценариев реакции до 4.x.x нарушает работу моего приложения

08.03.2021Рубрика: ВопросыАвтор: admin

Я занимаюсь разработкой внешнего интерфейса с использованием React (v16.44.0, пока не могу перейти на v17 из-за зависимости), react-scripts v3.4.4, Typescript (v3.9.9) и React-Bootstrap (v1.5.1) для некоторых месяцев и все идет хорошо.

Однако react-scripts недавно были обновлены до версии 4, и обновление ломает все приложение. Меня беспокоят проблемы с ценными бумагами с реактивными скриптами v3. Я также хотел бы обновить Typescript до v4 +, похоже, есть несовместимость между Typescript 4 и сценариями реакции 3, связанными с eslint. Также накапливаются различные предупреждения об устаревании.

Когда я включаю сценарии реакции v4.0.3, запускаю npm start, чтобы запустить сервер разработки, Firefox (v78.8) выдает:

ReferenceError: SharedArrayBuffer не определен в node_modules / webidl-conversions / lib / index.js: 347.

Очевидно webidl-conversions требуется для начальной загрузки. Я искал проблему SharedArrayBuffer, очевидно, она требует включения дополнительных заголовков, но я не мог найти, как добавить их с помощью веб-сервера npm start.

[Изменить: обновил Firefox до версии 86, проблема все еще есть, но я еще не пытался ее настроить.]

Если я попробую с Chrome (v89), у меня будет:

TypeError: невозможно преобразовать undefined или null в объект на node_modules / whatwg-url / dist / utils.js: 48

которые, похоже, также требуются для Bootstrap.

У меня нет зависимости от Bootstrap как такового, я использую реализацию react-bootstrap. Однако я использую bootstrap-scss для (S) части CSS.

При необходимости я могу загрузить трассировку полного стека. Вот мой 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
https://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)
https://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
https://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)
https://localhost:3000/static/js/main.chunk.js:1:95

пожалуйста, добавьте зависимости, которые у вас есть в package.json, к вопросу, чтобы мы могли воспроизвести проблему. — person scand1sk schedule 14.03.2021

Post Views: 142

См. также: Привет, Патрик Хунд, я хотел бы получить ваши ценные отзывы о нашем только что запущенном ReactJs Boilerplate…

4 react-scripts reactjs

Комментарии: 4

scand1sk 10.03.2021 в 00:00
Применяли ли вы каждую миграцию, описанную в журнале изменений?

Они также предлагают вам удалить node_modules, если вы сломаете свое приложение при обновлении с 3.4 до 4.
```
NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running yarn (or npm install) if you encounter errors after upgrading.
```
Попробуйте удалить его и запустить npm install

Да, я удалил package-lock.json и node_modules. Не помогло. В журнале изменений не так уж много уловок с миграцией. Что меня поражает, так это то, что ошибки, с которыми я сталкиваюсь, на самом деле не связаны с сценариями реакции … — person scand1sk; 10.03.2021
Ответить
scand1sk 15.03.2021 в 00:00

Вы можете загрузить файлы CSS Bootstrap вручную и сохранить их в файлах проекта.

К сожалению, поскольку я использовал response-bootstrap, полученный код очень тесно связан с Bootstrap (что, вероятно, было не очень хорошо, но отменить его было трудно). — person scand1sk; 16.03.2021

Вам не нужно удалять response-bootstrap, просто загрузите саму себя. Первый не зависит от второго афаика. Просто потребуйте использовать стили из начальной загрузки, которые вы можете добавить вручную — person scand1sk; 17.03.2021

Ответить
scand1sk 16.03.2021 в 00:00

Трудно сказать точно без вашего полного package.json, но кажется, что это не связано с обновлением самого react-scripts, а скорее с обновлением другой библиотеки, от которой вы зависите, которая использует SharedArrayBuffer which не поддерживается в Firefox v78

Изменить: OP обнаружил, что проблемный пакет был _4 _ </ а>

Что касается другой ошибки, похоже, она связана, но точно не знаю, почему это происходит. Как бы то ни было,

эту проблему нашел на своей странице Github, и одно из предложений — обновить jsdom до версии >=16.3 (если вы ее используете)

Jsdom — это зависимость сценариев реакции, так что да, вероятно, это связано с какой-то зависимостью. Не знаю, смогу ли я обновить jsdom отдельно, попробую. Обновление Firefox также может быть вариантом (я использую Debian Sid, поэтому это будет не так просто, но выполнимо), но я беспокоюсь, что конечные пользователи могут не иметь свободы для обновления. — person scand1sk; 16.03.2021

@ scand1sk не могли бы вы предоставить свой package.json, чтобы вам было легче помочь :)? — person scand1sk; 16.03.2021

Выполнено. Я также обновил Firefox до v86 и jsdom до 16.5.1, проблемы остались. Я выложу следы стека. На самом деле трассировка стека показывает ошибки в webpack / bootstrap, но я не уверен, что это действительно библиотека Bootstrap. — person scand1sk; 16.03.2021

@ scand1sk Я пытался воспроизвести локально и не обнаружил никаких ошибок. Я знаю, что вы уже ответили на этот вопрос, но, дважды проверяя, вы rm -rf node_modules пробовали еще раз? во-вторых, забрасывали ли вы свой проект ранее? — person scand1sk; 16.03.2021

Да, я очистил package-lock и node_modules (и сделал это снова точно сейчас). Я не выгружал проект. Нужно ли мне? Смогу ли я запустить npm start и npm build, если извлечу проект? — person scand1sk; 16.03.2021

@ scand1sk нет, не надо, просто интересно. Какая у вас версия nodejs установлена? — person scand1sk; 16.03.2021

npm — версия 7.6.2. У меня также установлен nodejs v12.21.0. — person scand1sk; 16.03.2021

Я знаю, что npm использует nodejs в фоновом режиме, но я фактически не взаимодействую с ним. Я не могу вспомнить, как nodejs был установлен в моей среде разработки (Debian Sid). В производстве я использую простой Apache. — person scand1sk; 16.03.2021

Если моя проблема не воспроизводится в пустом проекте, я думаю, я обречен воссоздавать свой проект по крупицам, пока ошибка не появится снова: / — person scand1sk; 16.03.2021

@ scand1sk Не знаю, что еще может быть. Он работает на моем компьютере с вашими точно такими же версиями и package.json. Если npm cache clean —force + удаление модулей узлов и блокировка + и переустановка не работают, вы можете клонировать свое репо в другом каталоге и попробовать еще раз. не знаю, что еще можно попробовать, если нет, извините. — person scand1sk; 16.03.2021

@ scand1sk вы пробовали клонировать и снова устанавливать? — person scand1sk; 17.03.2021

OK. Я потратил целый день на реконструкцию приложения модуль за модулем, чтобы увидеть, что вызвало ошибку. И это была … барабанная дробь … зависимость реакции-скетча, которая вызвала ошибку (как только она была импортирована). Ошибка указывается здесь github.com/tbolis/react-sketch/issues/126. У React-sketch нет особой активности, придется искать альтернативу (вздох). — person scand1sk; 17.03.2021

@ scand1sk Рад, что вам удалось его найти. Я проверял версии этой библиотеки, и кажется, что в версии ‹= 0.4.4 jsdom не использовался, но в› = 0.5.0 он используется. Вероятно, когда вы обновили сценарии реакции, она установила новую версию этой библиотеки, поскольку она не была в версии, что является критическим изменением. В долгосрочной перспективе я бы попытался удалить эту зависимость, поскольку она не кажется управляемой, но пока вы можете попробовать понизить ее до версии v4.4.0, тогда это может сработать. — person scand1sk; 17.03.2021

@ scand1sk "react-sketch": "0.4.4" (без ^) в вашем package.json может помочь — person scand1sk; 17.03.2021

Я узнал, что react-sketch2 — это вещь, которая является публикацией в npm файла react-sketch 0.5.7. Теперь возникла проблема с Typescript: у меня был файл с объявлением модуля response-sketch, который также был частью проблемы. В последней версии react-sketch он больше не требуется. — person scand1sk; 17.03.2021

По-прежнему нужна помощь: в файле types / index.d.ts объявляется модуль react-sketch, хотя новая версия называется react-sketch2. В результате я получаю сообщение об ошибке. Файл xxx / node_modules / response-sketch2 / types / index.d.ts не является модулем. Как устранить это несоответствие? — person scand1sk; 17.03.2021

Я скопировал index.d.ts в свой src и изменил объявление на response-sketch2. Хакерский, но работает. — person scand1sk; 17.03.2021

@ scand1sk да, не думаю, что у вас есть другой вариант, либо это, либо разветвление репо. Но рано или поздно я постараюсь уйти от этой библиотеки. — person scand1sk; 17.03.2021

Ответить
scand1sk 16.03.2021 в 00:00
Пытаться:

Удаление ваших node_modules и package-lock.json
```
// This normally fixes my issue when going back to old react projects
npm cache clean --force 

run npm install

run npm run start
```
Уже предложил другой ответ. Не работал. — person scand1sk; 16.03.2021
Ответить

Добавить комментарий