Stuck in loading story without error

[hasparus]

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

[shilman]

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

[ndelangen]

The iframe isn't loading, something makes it so the iframe.html isn't generated / outputted.

I can't immediately see why.

I think some of your loaders and storybook's are conflicting, or duplicated

[hasparus]

Yeah, I think I had conflicting loaders. This was ejected CRA, so I ended up scrapping this config and doing basically what preset-create-react-app does.

Storybook users might get problems like this due to the complexity of merging webpack configs, but I’m not sure anymore if anything can or should be done on your side.

I think we can close this issue. I don’t want to spam you 😓

[ndelangen]

Just happy that you found a solution

[hasparus]

Sorry. I fixed my config about 15 minutes after posting the issue. I should have clarified better that my problem wasn't "Storybook fails due to wrong webpack config. How do I fix my config?", but "Storybook fails with no error message."

Something like "The iframe isn't loading. Your webpack config is probably broken." would make me very happy, but I dived into the code a bit and I have no idea how would I add it, so it feels wrong asking you to do it.

[ndelangen]

Ah I see, that's a valid bug though

[Remeic]

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!

[ndelangen]

@Gongreg want to debug this together a bit?

[Remeic]

Can we re-open this issue?

[jasancheg]

Hi @Remeic, do you run the app in the simulator or a device after run the web ui of storybook? Note that "your stories will only show up in the left-pane after your device has connected to this storybook server". You can see this note is in the welcome page of the web UI.

[Remeic]

Hi @jasancheg , sorry for delay. Yes i run app on my device, and on device i can view default stories as CenteredView On webpage i don't see anything, only loading animation. No error in console and in terminal

[RobIsHere]

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

[Remeic]

@RobIsHere This can be a fix to this issue that storybook can implement out of the box? For example i can't eject and fix

[RobIsHere]

@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/

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[AbreezaSaleem]

@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?

[ocnerol]

I ran into this error and it turns out it was because I had updated the version of @storybook/preset-create-react-app in my app. I looked through my commit history and found the original version of @storybook/preset-create-react-app installed when I ran npm sb init. I installed that original version and it fixed the problem!