Я занимаюсь разработкой внешнего интерфейса с использованием 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
Источник: