前言

上一篇文章介绍了如何搭建react调试环境，不过里面react用的v17版本，有同学反应会出现白屏问题。趁着最近react-v18正式版上线，再开一篇用react-v18.2.0版本搭建个环境，给碰到问题的同学。

搭建调试环境

老样子通过create-react-app搭建脚手架，并暴露webpack配置，代码就不贴了，有不会的可以参考上一篇文章传送门。

置入react-v18

这次我们在脚手架的src下新建文件夹react/v18,并将clone下来的react源码中packages文件夹的的所有模块置入react/v18，见下图：

`config.alias`

接下来要修改config.alias，改变项目中react的指向，比上一篇文章提到再增加两个，如下：

react: path.resolve(__dirname, `../src/react/v18/react`),
"react-dom": path.resolve(__dirname, `../src/react/v18/react-dom`),
"legacy-events": path.resolve(__dirname,`../src/react/v18/legacy-events`),
shared: path.resolve(__dirname, `../src/react/v18/shared`),
scheduler: path.resolve(__dirname, `../src/react/v18/scheduler`),
"react-reconciler": path.resolve(__dirname,`../src/react/v18/react-reconciler`),

开始解决错误

Scheduler.js

同样的首先报错的还是react-reconciler/src/Scheduler.js中提示，找不到 unstable_yieldValue，unstable_setDisableYieldValue，这两个模块其实在react-scheduler/src/forks/SchedulerMock.js中，我们在react-debugger/src/react/v18/scheduler/index.js导出它俩，如下：

export {
  unstable_yieldValue,
  unstable_setDisableYieldValue,
} from "./src/forks/SchedulerMock";

ReactSharedInternals.js

又到了熟悉的浏览器报错环节，还是提示 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,找到源头此常量其实就是 ReactSharedInternals,替换掉，问题解决。

- import * as React from 'react';

+ import ReactSharedInternals from '../react/src/ReactSharedInternals';

- const ReactSharedInternals =
 React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

ReactFiberHostConfig.js

浏览器直接抛错误，看了代码里面就是个throw,替换成真正的./forks/ReactFiberHostConfig.dom，问题解决。

- throw new Error('This module must be shimmed by a specific renderer.');

+ export * from './forks/ReactFiberHostConfig.dom'

index

看下咱们的index.js,已经切到v18的createRoot，如下：

总结

解决完最后一个问题，终于出现了熟悉的原子图，v18也可以开心的调试了。当然项目也提交到github传送门，有需要的老铁给个小star。

React18 源码弃坑指南（二）-- 调试环境搭建（react-v18.2.0）

前言