Storybook Watch Mode Development Tutorials, Guides & Insights

To ensure new files are detected in real time, you need to configure Webpack’s watchOptions in your Storybook setup. Open your .storybook/main.js file and add the following:

// .storybook/main.js
module.exports = {
  webpackFinal: async (config) => {
    config.watchOptions = {
      aggregateTimeout: 200, // Delay before rebuilding after a change
      poll: 1000,            // Poll the files every second
    };
    return config;
  },
};