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