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:
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:
- Find
@storybook/core-server/dist/cjs/dev-server.js
- Find this code:
var _await$Promise$all = await Promise.all([preview, manager,
.
- 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:
- Add the
config/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();
};
- add
http-proxy-middleware
dependency
- 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