storybook: Stuck in loading story without error

Describe the bug I’m stuck in loading/no-stories state.

To Reproduce

I was merging webpack configs incorrectly. The problem of this issue is missing logging/representation of error state. I can try to provide repro with smaller broken config.

Expected behavior Since there’s no error (neither in shell nor browser console) the user can get pretty confused. A big red error pointing to what’s wrong with the config would be perfect. I also looked for --verbose mode to see what stories are detected.

Screenshots

Code snippets

My main.js (wrong, the bug is on my side)

const { resolve } = require('path');

const appWebpackConfig = require('../config/webpack.config')('development');

module.exports = {
    stories: ['../src/**/(*.stories|*.story|story).(mdx|jsx|tsx)'],
    addons: ['@storybook/addon-docs'],
    webpackFinal(config) {
        return {
            ...config,
            module: {
                ...config.module,
                rules: [
                    ...config.module.rules,
                    ...appWebpackConfig.module.rules,
                    {
                        // compile utils in .storybook
                        test: /\.(ts|tsx)$/,
                        include: resolve(__dirname),
                        loader: require.resolve('babel-loader'),
                        options: {
                            customize: require.resolve('babel-preset-react-app/webpack-overrides'),
                            cacheDirectory: true,
                            cacheCompression: false,
                        },
                    },
                ],
            },
            resolve: {
                ...config.resolve,
                modules: [...new Set([...config.resolve.modules, ...appWebpackConfig.resolve.modules])]),
                extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx'],
            },
        };
    },
};

My output of start-storybook --debug-webpack

info @storybook/react v5.3.8
info
info => Loading static files from: D:\workspace\chop-chop\convert\public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook\main.js".
info => Using default Webpack setup.
info => Using base config because react-scripts is not installed.
Manager webpack config
{
  name: 'manager',
  mode: 'development',
  bail: false,
  devtool: 'none',
  entry: [
    'D:\\app\\node_modules\\@storybook\\core\\dist\\server\\common\\polyfills.js',
    'D:\\app\\node_modules\\@storybook\\core\\dist\\client\\manager\\index.js',
    'D:\\app\\node_modules\\@storybook\\addon-docs\\dist\\register.js'
  ],
  output: {
    path: 'D:\\app\\node_modules\\@storybook\\core\\dist\\public',
    filename: '[name].[chunkhash].bundle.js',
    publicPath: ''
  },
  cache: {},
  plugins: [
    DllReferencePlugin {
      options: {
        context: 'D:\\app\\node_modules\\node_modules',
        manifest: 'D:\\app\\node_modules\\@storybook\\core\\dll\\storybook_ui-manifest.json'
      }
    },
    HtmlWebpackPlugin {
      options: {
        template: 'D:\\app\\node_modules\\@storybook\\core\\dist\\server\\templates\\index.ejs',
        templateContent: false,
        templateParameters: [Function: templateParameters],
        filename: 'index.html',
        hash: false,
        inject: false,
        compile: true,
        favicon: false,
        minify: 'auto',
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'none',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false,
        alwaysWriteToDisk: true
      },
      childCompilerHash: undefined,
      childCompilationOutputName: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    CaseSensitivePathsPlugin {
      options: {},
      logger: {
        log: [Function: bound consoleCall],
        warn: [Function: bound consoleCall],
        dir: [Function: bound consoleCall],
        time: [Function: bound consoleCall],
        timeEnd: [Function: bound consoleCall],
        timeLog: [Function: bound consoleCall],
        trace: [Function: bound consoleCall],
        assert: [Function: bound consoleCall],
        clear: [Function: bound consoleCall],
        count: [Function: bound consoleCall],
        countReset: [Function: bound consoleCall],
        group: [Function: bound consoleCall],
        groupEnd: [Function: bound consoleCall],
        table: [Function: bound consoleCall],
        debug: [Function: bound consoleCall],
        info: [Function: bound consoleCall],
        dirxml: [Function: bound consoleCall],
        error: [Function: bound consoleCall],
        groupCollapsed: [Function: bound consoleCall],
        Console: [Function: Console],
        profile: [Function: profile],
        profileEnd: [Function: profileEnd],
        timeStamp: [Function: timeStamp],
        context: [Function: context],
        [Symbol(kBindStreamsEager)]: [Function: bound ],
        [Symbol(kBindStreamsLazy)]: [Function: bound ],
        [Symbol(kBindProperties)]: [Function: bound ],
        [Symbol(kWriteToConsole)]: [Function: bound ],
        [Symbol(kGetInspectOptions)]: [Function: bound ],
        [Symbol(kFormatForStdout)]: [Function: bound ],
        [Symbol(kFormatForStderr)]: [Function: bound ]
      },
      pathCache: {},
      fsOperations: 0,
      primed: false
    },
    DefinePlugin {
      definitions: {}
    },
    DefinePlugin {
      definitions: {
        'process.env': {},
        NODE_ENV: '"development"'
      }
    },
    ContextReplacementPlugin {
      resourceRegExp: /graphql-language-service-interface[/\\]dist/,
      newContentResource: undefined,
      newContentRecursive: undefined,
      newContentRegExp: /\.js$/
    },
    NormalModuleReplacementPlugin {
      resourceRegExp: /core-js/,
      newResource: [Function (anonymous)]
    }
  ],
  module: {
    rules: [
      {
        test: /\.(mjs|jsx?)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: 'D:\\app\\node_modules\\.cache\\storybook',
              presets: [
                [
                  'D:\\app\\node_modules\\@babel\\preset-env\\lib\\index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                'D:\\app\\node_modules\\@babel\\preset-react\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\preset-flow\\lib\\index.js'
              ],
              plugins: [
                'D:\\app\\node_modules\\@babel\\plugin-proposal-object-rest-spread\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-proposal-class-properties\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-syntax-dynamic-import\\lib\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-emotion\\dist\\babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                'D:\\app\\node_modules\\babel-plugin-macros\\dist\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-transform-react-constant-elements\\lib\\index.js',
                'D:\\app\\node_modules\\babel-plugin-add-react-displayname\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-react-docgen\\lib\\index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          }
        ],
        include: [ 'D:\\app' ],
        exclude: [ 'D:\\app\\node_modules' ]
      },
      {
        test: /\.css$/,
        use: [
          'D:\\app\\node_modules\\@storybook\\core\\node_modules\\style-loader\\dist\\cjs.js',
          {
            loader: 'D:\\app\\node_modules\\@storybook\\core\\node_modules\\css-loader\\dist\\cjs.js',
            options: { importLoaders: 1 }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        loader: 'D:\\app\\node_modules\\file-loader\\dist\\cjs.js',
        query: { name: 'static/media/[name].[hash:8].[ext]' }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        loader: 'D:\\app\\node_modules\\url-loader\\dist\\cjs.js',
        query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
      }
    ]
  },
  resolve: {
    extensions: [ '.mjs', '.js', '.jsx', '.json' ],
    modules: [ 'node_modules' ],
    alias: {
      '@emotion/core': 'D:\\app\\node_modules\\@emotion\\core',
      '@emotion/styled': 'D:\\app\\node_modules\\@emotion\\styled',
      'emotion-theming': 'D:\\app\\node_modules\\emotion-theming',
      '@storybook/addons': 'D:\\app\\node_modules\\@storybook\\addons',
      '@storybook/api': 'D:\\app\\node_modules\\@storybook\\api',
      '@storybook/channels': 'D:\\app\\node_modules\\@storybook\\ui\\node_modules\\@storybook\\channels',
      '@storybook/components': 'D:\\app\\node_modules\\@storybook\\components',
      '@storybook/core-events': 'D:\\app\\node_modules\\@storybook\\core-events',
      '@storybook/router': 'D:\\app\\node_modules\\@storybook\\ui\\node_modules\\@storybook\\router',
      '@storybook/theming': 'D:\\app\\node_modules\\@storybook\\theming',
      '@storybook/ui': 'D:\\app\\node_modules\\@storybook\\ui',
      'prop-types': 'D:\\app\\node_modules\\prop-types',
      react: 'D:\\app\\node_modules\\react',
      'react-dom': 'D:\\app\\node_modules\\react-dom'
    }
  },
  recordsPath: 'D:\\app\\node_modules\\.cache\\storybook\\records.json',
  performance: { hints: false },
  optimization: { splitChunks: { chunks: 'all' }, runtimeChunk: true }
}
Preview webpack config
{
  mode: 'development',
  bail: false,
  devtool: '#cheap-module-source-map',
  entry: [
    'D:\\app\\node_modules\\@storybook\\core\\dist\\server\\common\\polyfills.js',
    'D:\\app\\node_modules\\@storybook\\core\\dist\\server\\preview\\globals.js',
    'D:\\app\\node_modules\\@storybook\\addon-docs\\dist\\frameworks\\common\\config.js',
    'D:\\app\\node_modules\\@storybook\\addon-docs\\dist\\frameworks\\react\\config.js',
    'D:\\app\\.storybook\\preview.js',
    'D:\\app\\.storybook\\generated-entry.js',
    'D:\\app\\node_modules\\webpack-hot-middleware\\client.js?reload=true&quiet=true'
  ],
  output: {
    path: 'D:\\app\\node_modules\\@storybook\\core\\dist\\public',
    filename: '[name].[hash].bundle.js',
    publicPath: ''
  },
  plugins: [
    VirtualModulesPlugin {
      _staticModules: {
        'D:\\app\\.storybook\\generated-entry.js': '\n' +
          "              import { configure } from '@storybook/react';\n" +
          '              module._StorybookPreserveDecorators = true;\n' +
          '\n' +
          "              configure([require.context('../src', true, /^\\.\\/(?:(?:|[\\\\/]|(?:(?:(?!(?:|[\\\\/])\\.).)*?)[\\\\/])([^\\\\/]*?\\.stories|[^\\\\/]*?\\.story|story)\\.(mdx|jsx|tsx))$/)\n" +
          '              ], module);\n' +
          '            '
      }
    },
    HtmlWebpackPlugin {
      options: {
        template: 'D:\\app\\node_modules\\@storybook\\core\\dist\\server\\templates\\index.ejs',
        templateContent: false,
        templateParameters: [Function: templateParameters],
        filename: 'iframe.html',
        hash: false,
        inject: false,
        compile: true,
        favicon: false,
        minify: 'auto',
        cache: true,
        showErrors: true,
        chunks: 'all',
        excludeChunks: [],
        chunksSortMode: 'none',
        meta: {},
        base: false,
        title: 'Webpack App',
        xhtml: false,
        alwaysWriteToDisk: true
      },
      childCompilerHash: undefined,
      childCompilationOutputName: undefined,
      assetJson: undefined,
      hash: undefined,
      version: 4
    },
    DefinePlugin {
      definitions: {},
        NODE_ENV: '"development"'
      }
    },
    WatchMissingNodeModulesPlugin {
      nodeModulesPath: 'D:\\app\\node_modules'
    },
    HotModuleReplacementPlugin {
      options: {},
      multiStep: undefined,
      fullBuildTimeout: 200,
      requestTimeout: 10000
    },
    CaseSensitivePathsPlugin {
      options: {},
      logger: {
        log: [Function: bound consoleCall],
        warn: [Function: bound consoleCall],
        dir: [Function: bound consoleCall],
        time: [Function: bound consoleCall],
        timeEnd: [Function: bound consoleCall],
        timeLog: [Function: bound consoleCall],
        trace: [Function: bound consoleCall],
        assert: [Function: bound consoleCall],
        clear: [Function: bound consoleCall],
        count: [Function: bound consoleCall],
        countReset: [Function: bound consoleCall],
        group: [Function: bound consoleCall],
        groupEnd: [Function: bound consoleCall],
        table: [Function: bound consoleCall],
        debug: [Function: bound consoleCall],
        info: [Function: bound consoleCall],
        dirxml: [Function: bound consoleCall],
        error: [Function: bound consoleCall],
        groupCollapsed: [Function: bound consoleCall],
        Console: [Function: Console],
        profile: [Function: profile],
        profileEnd: [Function: profileEnd],
        timeStamp: [Function: timeStamp],
        context: [Function: context],
        [Symbol(kBindStreamsEager)]: [Function: bound ],
        [Symbol(kBindStreamsLazy)]: [Function: bound ],
        [Symbol(kBindProperties)]: [Function: bound ],
        [Symbol(kWriteToConsole)]: [Function: bound ],
        [Symbol(kGetInspectOptions)]: [Function: bound ],
        [Symbol(kFormatForStdout)]: [Function: bound ],
        [Symbol(kFormatForStderr)]: [Function: bound ]
      },
      pathCache: {},
      fsOperations: 0,
      primed: false
    },
    ProgressPlugin {
      profile: false,
      handler: undefined,
      modulesCount: 500,
      showEntries: false,
      showModules: true,
      showActiveModules: true
    },
    DefinePlugin {
      definitions: {}
    },
    NormalModuleReplacementPlugin {
      resourceRegExp: /core-js/,
      newResource: [Function (anonymous)]
    }
  ],
  module: {
    rules: [
      {
        test: /\.(mjs|jsx?)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: 'D:\\app\\node_modules\\.cache\\storybook',
              presets: [
                [
                  'D:\\app\\node_modules\\@babel\\preset-env\\lib\\index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                'D:\\app\\node_modules\\@babel\\preset-react\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\preset-flow\\lib\\index.js'
              ],
              plugins: [
                'D:\\app\\node_modules\\@babel\\plugin-proposal-object-rest-spread\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-proposal-class-properties\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-syntax-dynamic-import\\lib\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-emotion\\dist\\babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                'D:\\app\\node_modules\\babel-plugin-macros\\dist\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-transform-react-constant-elements\\lib\\index.js',
                'D:\\app\\node_modules\\babel-plugin-add-react-displayname\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-react-docgen\\lib\\index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          }
        ],
        include: [ 'D:\\app' ],
        exclude: [ 'D:\\app\\node_modules' ]
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: 'D:\\app\\node_modules\\@storybook\\core\\node_modules\\raw-loader\\dist\\cjs.js'
          }
        ]
      },
      {
        test: /\.js$/,
        include: /node_modules\/acorn-jsx/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  'D:\\app\\node_modules\\@babel\\preset-env\\lib\\index.js',
                  { modules: 'commonjs' }
                ]
              ]
            }
          }
        ]
      },
      {
        test: /\.(stories|story).mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: 'D:\\app\\node_modules\\.cache\\storybook',
              presets: [
                [
                  'D:\\app\\node_modules\\@babel\\preset-env\\lib\\index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                'D:\\app\\node_modules\\@babel\\preset-react\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\preset-flow\\lib\\index.js'
              ],
              plugins: [
                'D:\\app\\node_modules\\@babel\\plugin-proposal-object-rest-spread\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-proposal-class-properties\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-syntax-dynamic-import\\lib\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-emotion\\dist\\babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                'D:\\app\\node_modules\\babel-plugin-macros\\dist\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-transform-react-constant-elements\\lib\\index.js',
                'D:\\app\\node_modules\\babel-plugin-add-react-displayname\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-react-docgen\\lib\\index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          },
          {
            loader: '@mdx-js/loader',
            options: {
              compilers: [ [Function: compiler] ],
              remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
            }
          }
        ]
      },
      {
        test: /\.mdx$/,
        exclude: /\.(stories|story).mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: 'D:\\app\\node_modules\\.cache\\storybook',
              presets: [
                [
                  'D:\\app\\node_modules\\@babel\\preset-env\\lib\\index.js',
                  {
                    shippedProposals: true,
                    useBuiltIns: 'usage',
                    corejs: '3'
                  }
                ],
                'D:\\app\\node_modules\\@babel\\preset-react\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\preset-flow\\lib\\index.js'
              ],
              plugins: [
                'D:\\app\\node_modules\\@babel\\plugin-proposal-object-rest-spread\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-proposal-class-properties\\lib\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-syntax-dynamic-import\\lib\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-emotion\\dist\\babel-plugin-emotion.cjs.js',
                  { sourceMap: true, autoLabel: true }
                ],
                'D:\\app\\node_modules\\babel-plugin-macros\\dist\\index.js',
                'D:\\app\\node_modules\\@babel\\plugin-transform-react-constant-elements\\lib\\index.js',
                'D:\\app\\node_modules\\babel-plugin-add-react-displayname\\index.js',
                [
                  'D:\\app\\node_modules\\babel-plugin-react-docgen\\lib\\index.js',
                  {
                    DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                  }
                ]
              ]
            }
          },
          {
            loader: '@mdx-js/loader',
            options: {
              remarkPlugins: [ [Function: slug], [Function: externalLinks] ]
            }
          }
        ]
      },
      {
        test: /\.(stories|story)\.[tj]sx?$/,
        loader: 'D:\\app\\node_modules\\@storybook\\source-loader\\dist\\server\\index.js',
        options: { inspectLocalDependencies: true },
        enforce: 'pre'
      },
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          'D:\\app\\node_modules\\@storybook\\core\\node_modules\\style-loader\\dist\\cjs.js',
          {
            loader: 'D:\\app\\node_modules\\@storybook\\core\\node_modules\\css-loader\\dist\\cjs.js',
            options: { importLoaders: 1 }
          },
          {
            loader: 'D:\\app\\node_modules\\postcss-loader\\src\\index.js',
            options: {
              ident: 'postcss',
              postcss: {},
              plugins: [Function: plugins]
            }
          }
        ]
      },
      {
        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        loader: 'D:\\app\\node_modules\\file-loader\\dist\\cjs.js',
        query: { name: 'static/media/[name].[hash:8].[ext]' }
      },
      {
        test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
        loader: 'D:\\app\\node_modules\\url-loader\\dist\\cjs.js',
        query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
      },
      { parser: { requireEnsure: false } },
      {
        oneOf: [
          {
            test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
            loader: 'D:\\app\\node_modules\\url-loader\\dist\\cjs.js',
            options: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]'
            }
          },
          {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            include: 'D:\\app\\src',
            loader: 'D:\\app\\node_modules\\babel-loader\\lib\\index.js',
            options: {
              customize: 'D:\\app\\node_modules\\babel-preset-react-app\\webpack-overrides.js',
              cacheDirectory: true,
              cacheCompression: false,
              compact: false
            }
          },
          {
            test: /\.(js|mjs)$/,
            exclude: /@babel(?:\/|\\{1,2})runtime/,
            loader: 'D:\\app\\node_modules\\babel-loader\\lib\\index.js',
            options: {
              babelrc: false,
              configFile: false,
              compact: false,
              presets: [
                [
                  'D:\\app\\node_modules\\babel-preset-react-app\\dependencies.js',
                  { helpers: true }
                ]
              ],
              cacheDirectory: true,
              cacheCompression: false,
              sourceMaps: true,
              inputSourceMap: true
            }
          },
          {
            test: /\.css$/,
            exclude: /\.module\.css$/,
            use: [
              'D:\\app\\node_modules\\style-loader\\dist\\index.js',
              {
                loader: 'D:\\app\\node_modules\\css-loader\\dist\\cjs.js',
                options: { importLoaders: 1, sourceMap: false }
              },
              {
                loader: 'D:\\app\\node_modules\\postcss-loader\\src\\index.js',
                options: {
                  ident: 'postcss',
                  plugins: [Function: plugins],
                  sourceMap: false
                }
              }
            ],
            sideEffects: true
          },
          {
            test: /\.module\.css$/,
            use: [
              'D:\\app\\node_modules\\style-loader\\dist\\index.js',
              {
                loader: 'D:\\app\\node_modules\\css-loader\\dist\\cjs.js',
                options: {
                  importLoaders: 1,
                  sourceMap: false,
                  modules: { getLocalIdent: [Function: getLocalIdent] }
                }
              },
              {
                loader: 'D:\\app\\node_modules\\postcss-loader\\src\\index.js',
                options: {
                  ident: 'postcss',
                  plugins: [Function: plugins],
                  sourceMap: false
                }
              }
            ]
          },
          {
            test: /\.(scss|sass)$/,
            exclude: /\.module\.(scss|sass)$/,
            use: [
              'D:\\app\\node_modules\\style-loader\\dist\\index.js',
              {
                loader: 'D:\\app\\node_modules\\css-loader\\dist\\cjs.js',
                options: { importLoaders: 2, sourceMap: false }
              },
              {
                loader: 'D:\\app\\node_modules\\postcss-loader\\src\\index.js',
                options: {
                  ident: 'postcss',
                  plugins: [Function: plugins],
                  sourceMap: false
                }
              },
              {
                loader: 'D:\\app\\node_modules\\resolve-url-loader\\index.js',
                options: { sourceMap: false }
              },
              {
                loader: 'D:\\app\\node_modules\\sass-loader\\dist\\cjs.js',
                options: { sourceMap: true }
              }
            ],
            sideEffects: true
          },
          {
            test: /\.module\.(scss|sass)$/,
            use: [
              'D:\\app\\node_modules\\style-loader\\dist\\index.js',
              {
                loader: 'D:\\app\\node_modules\\css-loader\\dist\\cjs.js',
                options: {
                  importLoaders: 2,
                  sourceMap: false,
                  modules: { getLocalIdent: [Function: getLocalIdent] }
                }
              },
              {
                loader: 'D:\\app\\node_modules\\postcss-loader\\src\\index.js',
                options: {
                  ident: 'postcss',
                  plugins: [Function: plugins],
                  sourceMap: false
                }
              },
              {
                loader: 'D:\\app\\node_modules\\resolve-url-loader\\index.js',
                options: { sourceMap: false }
              },
              {
                loader: 'D:\\app\\node_modules\\sass-loader\\dist\\cjs.js',
                options: { sourceMap: true }
              }
            ]
          },
          {
            loader: 'D:\\app\\node_modules\\file-loader\\dist\\cjs.js',
            exclude: [ /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/ ],
            options: { name: 'static/media/[name].[hash:8].[ext]' }
          }
        ]
      },
      {
        test: /\.(ts|tsx)$/,
        include: 'D:\\app\\.storybook',
        loader: 'D:\\app\\node_modules\\babel-loader\\lib\\index.js',
        options: {
          customize: 'D:\\app\\node_modules\\babel-preset-react-app\\webpack-overrides.js',
          cacheDirectory: true,
          cacheCompression: false
        }
      }
    ]
  },
  resolve: {
    extensions: [ '.mjs', '.js', '.jsx', '.json', '.ts', '.tsx' ],
    modules: [
      'node_modules',
      'D:\\app\\node_modules',
      'D:\\app\\src'
    ],
    alias: {
      'babel-runtime/core-js/object/assign': 'D:\\app\\node_modules\\core-js\\es\\object\\assign.js',
      react: 'D:\\app\\node_modules\\react',
      'react-dom': 'D:\\app\\node_modules\\react-dom'
    }
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: true,
    minimizer: [
      TerserPlugin {
        options: {
          test: /\.m?js(\?.*)?$/i,
          chunkFilter: [Function: chunkFilter],
          warningsFilter: [Function: warningsFilter],
          extractComments: true,
          sourceMap: true,
          cache: true,
          cacheKeys: [Function: cacheKeys],
          parallel: true,
          include: undefined,
          exclude: undefined,
          minify: undefined,
          terserOptions: { mangle: false, keep_fnames: true }
        }
      }
    ]
  },
  performance: { hints: false }
}
webpack built de21a63c3e2e315b1c08 in 26092ms
Γò¡ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓò«
Γöé                                                Γöé
Γöé   Storybook 5.3.8 started                      Γöé
Γöé   19 s for manager and 29 s for preview        Γöé
Γöé                                                Γöé
Γöé    Local:            http://localhost:9009/    Γöé
Γöé    On your network:  http://10.0.75.1:9009/    Γöé
Γöé                                                Γöé
Γò░ΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓöÇΓò»

System:

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
  Binaries:
    Node: 13.3.0 - D:\universal-tools\Node\node.EXE
    Yarn: 1.19.2 - D:\universal-tools\bin\yarn.CMD
    npm: 6.9.0 - D:\universal-tools\Node\npm.CMD
  Browsers:
    Edge: 44.18362.1.0

Additional context

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 14
Comments: 17 (7 by maintainers)

Most upvoted comments

After some desperate moments I think, I found the reason 😃

In the docs its recommended to merge webpack configs like this: { …config, module: { …config.module, rules: custom.module.rules } }

The problem is: rules section in most webpack configs end with some catch-all file-loader like this: In my case that config is an ejected CRA webpack config.

        {
          loader: require.resolve('file-loader'),
          // Exclude `js` files to keep "css" loader working as it injects
          // its runtime that would otherwise be processed through "file" loader.
          // Also exclude `html` and `json` extensions so they get processed
          // by webpacks internal loaders.
          exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },

The config is working with the following change. Notice the |ejs in the exclude section

        {
          loader: require.resolve('file-loader'),
          // Exclude `js` files to keep "css" loader working as it injects
          // its runtime that would otherwise be processed through "file" loader.
          // Also exclude `html` and `json` extensions so they get processed
          // by webpacks internal loaders.
          exclude: [/\.(js|mjs|jsx|ts|tsx|ejs)$/, /\.html$/, /\.json$/],
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },

Storybookjs is using a custom index.ejs template with HtmlWebpackPlugin. If you have such a loader, that will pick up the index.ejs template and copy it properly hashed to dist into your static assets folder.

Because HtmlWebpackPlugin seems to have no parameter or input checks at all, it doesn’t recognize the wrong situation but just produces garbage silently. The result of the mess looks exactly like the issue @hasparus had.

Three things that could probably have helped me to debug the situation faster:

a hint in the docs to remove/adjust catch-all loaders before merging configs
checking the loaders, if they all test/exclude properly so they do not handle .ejs files
better input checking at HTMLWebpackPlugin so it recognizes missing parameters/templates and informs the user

+11

RobIsHere on Jul 25, 2020

Hi, sorry for disorder. I startup now a react native project with npx react-native init appName After it, i run npx -p @storybook/cli sb init --type react_native but storybook keep loading, i don’t have add either a new line of code.

There something i can do to fix it? Thanks in advance!

Remeic on Jun 19, 2020

@Remeic A fix in storybook should be possible. Storybook has a separate webpack config, you can modify. You shouldn’t need to eject. (Although I can only recommend it from my point of view. This way I got rid of the lock-in and I’m quite happy since)

module.exports = {
    webpackFinal: (config) => {
        const newCfg = {
            ...config,
            module: {
                ...config.module,
                rules: [
                    // Get rid of catch-all loader here, which is usually last
                    ...getYourProjectsWebpackCfg().module.rules.slice(0, -1), 
                    { /*reinsert the modified catch all loader here, like in my issue description above */ }
                ]
            }
        };
        return newCfg;
    },
};

See https://storybook.js.org/docs/configurations/custom-webpack-config/

RobIsHere on Jul 26, 2020

@RobIsHere, can you tell me where I can update this webpack config? I followed this guide but I don’t have .storybook/main.js folder. @Remeic can you tell me how you fixed it?

AbreezaSaleem on Apr 20, 2021

@Gongreg want to debug this together a bit?

ndelangen on Jun 22, 2020

I believe we added some webpack logging in 6.0 cc @ndelangen

shilman on Jan 25, 2020