迁移到 React 17 报错：TypeError: Cannot set property reducers of #<Object> which has only a getter

[EquinoxHzXu]

旧项目基于 eject 后的 16.4，用 cra 搭建了未 eject 的 react 17 的项目（react-scripts 4.0.1），localhost debug 时在浏览器里报错（console 里没有报错）。react-scripts 3.4.4 同样出现这个错误

TypeError: Cannot set property reducers of #<Object> which has only a getter
validateModel
node_modules/mirrorx/lib/model.js:63
  60 |     throw new Error("Model effects must be a valid object!");
  61 |   }
  62 | 
> 63 |   m.reducers = filterReducers(reducers);
  64 |   m.effects = filterReducers(effects);
  65 |   return m;
  66 | }
View compiled
model
node_modules/mirrorx/lib/model.js:19
  16 | exports.models = models;
  17 | 
  18 | function model(m) {
> 19 |   var _validateModel = validateModel(m),
  20 |       name = _validateModel.name,
  21 |       reducers = _validateModel.reducers,
  22 |       initialState = _validateModel.initialState,
View compiled
Module.<anonymous>
src/model/index.js:62
  61 | 
> 62 | mirror.model(myModule);
  63 | 
View compiled
Module../src/model/index.js
http://localhost:3000/static/js/main.chunk.js:35717:30
__webpack_require__
/Users/elizurhz_air/code/test/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
/Users/elizurhz_air/code/test/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__
/Users/elizurhz_air/code/test/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
/Users/elizurhz_air/code/test/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__
/Users/elizurhz_air/code/test/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
/Users/elizurhz_air/code/test/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:46286:18
__webpack_require__
/Users/elizurhz_air/code/test/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
checkDeferredModules
/Users/elizurhz_air/code/test/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]
/Users/elizurhz_air/code/test/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:81

在 console 里 debug 发现类型变成 ES Module，所以报错

旧版本没有这个问题

如果对 ES Module 进行格式转换转成 Object 即可避免这种问题

[llh911001]

有無可能是 babel v7 的這個 feature 導致： babel/babel#8363