我一直在使用 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/