Storybook 相关问题#

支持 Storybook v7#

Storybook v7 目前已全面支持并已成为我们的推荐使用版本。

使用 Storybook Addon 或者其他配置不生效#

Modern.js Module 目前使用的 Storybook 版本是 v6，如果使用了 v7 版本的 Addon 可能会出现插件不生效的情况。

除了 Addon 以外，其他配置也可能会有区别。比如修改 preview.js 配置文件的话，Storybook v6 与 v7 的写法也不相同：

• v6：文档链接
• v7：文档链接

Cannot find module 'react-dom/package.json'#

在执行 Storybook 调试的时候，出现下面的报错提示：

ERR! Error: Cannot find module 'react-dom/package.json'

解决办法：在项目中安装 react-dom 依赖。

{
    "devDependencies": {
        "react-dom": "^17"
    }
}

报错后，看不到具体报错信息#

解决办法：

1. 找到 @storybook/core-server/dist/cjs/dev-server.js
2. 找到 var _await$Promise$all = await Promise.all([preview, manager 这附近的代码。
3. 修改成：

var _await$Promise$all = await Promise.all([
    preview.catch(e => console.info(e)),
    manager // TODO #13083 Restore this when compiling the preview is fast enough
  // .then((result) => {
  //   if (!options.ci && !options.smokeTest) openInBrowser(address);
  //   return result;
  // })
  .catch(previewBuilder.bail)]),
      _await$Promise$all2 = _slicedToArray(_await$Promise$all, 2),
      previewResult = _await$Promise$all2[0],
      managerResult = _await$Promise$all2[1]; // TODO #13083 Remove this when compiling the preview is fast enough

Couldn't find any stories is your Storybook#

当在预览区域看到类似这样的报错提示的时候，首先可以打开一下浏览器的控制台，应该会有些报错信息。可以先根据报错信息来推断是不是编写代码里出现的问题导致 Storybook 无法正常运行。修复后，再次刷新查看是否正常。

Storybook 添加 Proxy 功能#

Storybook 没有提供相关方案，不过 Storybook Issue 中有找到相关的解决办法。在 Modern.js Module 中，你可以：

1. 添加 .storybook/middleware.js 文件，并初始化下面的内容：

/* eslint-disable filenames/match-exported */
module.exports = function expressMiddleware(router) {
    // router is express router
    // import { Router } from 'express'
    // router = new Router();
};

2. 添加 http-proxy-middleware 依赖
3. 添加代理路由相关配置

/* eslint-disable filenames/match-exported */
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function expressMiddleware (router) {
  router.use('/api', createProxyMiddleware({
    target: "http://localhost:8000",
    changeOrigin: true
  }))
}

相关 issue 链接：#11551。

Tailwind CSS 在 Storybook 中不生效#

Modern.js Module 的 Storybook 构建能力由 Rsbuild 提供，由于 Rsbuild 的底层实现与 Modern.js Module 并未打通，因此， Modern.js Module 插件无法在 Storybook (Rsbuild) 中生效。

解决办法：需要在 storybook 中单独注册 tailwindcss 的 PostCSS 插件。

参考链接：Rsbuild - tailwindcss。