解决react-cosmos在react-app-rewired项目里启动报错

react-cosmos配置文档

https://github.com/react-cosmos/react-cosmos/tree/main/docs

react-cosmos官方给出的配置文件：

// webpack.config.js
const { paths } = require('react-app-rewired');
const overrides = require('react-app-rewired/config-overrides');
const config = require(paths.scriptVersion + '/config/webpack.config.dev');

module.exports = overrides.webpack(config, process.env.NODE_ENV);

第一个错：

Error: Cannot find module 
'/Users/***/node_modules/[email protected]@react-scripts/config/webpack.config.dev'

查看了react-scripts目录，发现没有.dev文件，只有onfig.js。

在配置文件里去掉了.dev。

第二个错：

[Cosmos] Server crashed...

  (╯°□°)╯︵ ┻━┻

TypeError: Cannot read property 'rules' of undefined
    at index (/Users/***/node_modules/[email protected]@react-app-rewire-postcss/index.cjs.js:5:37)
    at Object.override [as webpack] (/Users/***/configs/config-overrides.js:23:3)
    at Object.<anonymous> (/Users/***/webpack.config.js:5:28)

调试了一下，在config-overrides文件里，图1里代码：

图1

 发现出错是因为config.module为空，然后发现config变量是一个函数。

查看了一下react-app-rewired的源码，如图2所示。

图2

 在CRA 2.1.2之后，webpackconfig变成了一个函数，覆盖配置的时候，需要执行以后才能得到配置。

于是修改cosmos的配置代码为下面这段：

// webpack.config.js
const { paths } = require('react-app-rewired');
const overrides = require('react-app-rewired/config-overrides');
const config = require(paths.scriptVersion + '/config/webpack.config');

module.exports = overrides.webpack(config(process.env.NODE_ENV), process.env.NODE_ENV);

cosmos就成功跑起来了。