Modern.js supports debugging using Storybook. When configuring Storybook, you need to configure it in the config/storybook directory of the project.

Please refer to Storybook Configuration for Storybook configuration.


Enabling the Storybook function requires running the new command to enable it under the project first.


For the webpack configuration of the Storybook Manager app section, you can configure it by adding the ./config/storybook/main.js file to configure it.

// ./config/storybook/main.js

module.exports = {
  // it controls the Storybook manager app
  managerWebpack: async (config, options) => {
    // update config here
    return config;


There are some limitations when using the config/storybook directory for configuration:

  • The location where the Story file is stored cannot be modified, that is, the stories configuration cannot be modified in the main.js file.
  • It is not supported to modify Webpack and Babel related configurations in main.js, related requirements can be passed through tools.webpack /tools.babel modify.