升级React v18后Storybook报React未定义错误的解决办法

针对你将React、ReactDOM从v16升级到v18后，Storybook出现react-dom/client相关报错的问题，可按以下步骤排查修复：

1. 更新Storybook预览渲染逻辑至React 18标准 #

React 18废弃了旧的ReactDOM.render方法，改用createRoot进行渲染。Storybook 6.5.x默认可能仍使用旧渲染逻辑，需手动替换：

在.storybook/preview.js中添加或修改渲染逻辑：

import { createRoot } from 'react-dom/client';
import { addDecorator } from '@storybook/react';

// 自定义渲染函数适配React 18
const renderReact18 = (story) => {
  const container = document.createElement('div');
  const root = createRoot(container);
  root.render(story());
  return container;
};

addDecorator(renderReact18);

2. 强制Webpack解析项目根目录的React依赖 #

避免Storybook内部依赖的旧版本React与项目的React 18冲突，在.storybook/main.js中添加Webpack别名配置：

const path = require('path');

module.exports = {
  // 保留原有配置（如stories、addons等）
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react': path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    };
    return config;
  },
};

3. 清理依赖缓存并重装依赖 #

依赖缓存可能导致版本不一致，执行以下命令重置依赖：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

如果使用yarn，则替换为：

rm -rf node_modules yarn.lock
yarn install

4. 确认类型包版本锁定生效 #

检查package.json中的resolutions配置是否正确覆盖了所有依赖的@types/react和@types/react-dom版本，重装依赖后可通过npm ls @types/react命令验证版本是否统一为v18.x。

完成以上步骤后，重新启动Storybook即可验证报错是否解决。

内容的提问来源于stack exchange，提问作者Ben G