Storybook FAQ#

Storybook v7 Support#

Storybook v7 is now fully supported and has become our recommended version.

Using Storybook Addon or other configurations does not work#

Modern.js Module is currently using Storybook version v6, if you are using Addon version v7 you may not be able to get the addon to work.

In addition to the Addon, other configurations may also have differences. For example, if you modify the preview.js configuration file, Storybook v6 is written differently than v7:

• v6：Document
• v7：Document

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

When debug Storybook, the following problem occurs:

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

You can install the react-dom dependency in the project.

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

Unable to locate the specific error message#

Solutions:

1. Find @storybook/core-server/dist/cjs/dev-server.js
2. Find this code: var _await$Promise$all = await Promise.all([preview, manager,.
3. Modify it：

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

Can`t find any stories is your Storybook#

When you get a problem like this, you can first open the browser console and there should be some error messages. You can use the error messages to deduce if there is a problem in the code you are writing that is causing Storybook to not work properly.

Storybook Adds Proxy Functionality#

Storybook does not provide a solution for this, but there is one in the Storybook Issue. In the Modern.js Module, you can:

1. Add the .storybook/middleware.js file and initialize the following:

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

2. add http-proxy-middleware dependency
3. Add proxy routing-related configuration

/* 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
  }))
}

Link：https://github.com/storybookjs/storybook/issues/11551

Tailwind CSS doesn't work in Storybook#

The Storybook build capability of the Modern.js Module is provided by Rsbuild. Since the underlying implementation of Rsbuild is not integrated with Modern.js Module, the Modern.js Module plugins do not work in Storybook (Rsbuild).

Solution: Register the tailwindcss PostCSS plugin in storybook.

Reference link: Rsbuild - tailwindcss.