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
hasparus
👍6
All 15 comments
I believe we added some webpack logging in 6.0 cc @ndelangen
shilman
on 25 Jan 2020
👍1
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
ndelangen
on 25 Jan 2020
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 😓
hasparus
on 25 Jan 2020
Just happy that you found a solution
ndelangen
on 26 Jan 2020
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.
hasparus
on 26 Jan 2020
Ah I see, that's a valid bug though
ndelangen
on 27 Jan 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 19 Jun 2020
@Gongreg want to debug this together a bit?
ndelangen
on 22 Jun 2020
❤1
Can we re-open this issue?
Remeic
on 4 Jul 2020
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.
jasancheg
on 7 Jul 2020
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
Remeic
on 8 Jul 2020
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
RobIsHere
on 25 Jul 2020
@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
Remeic
on 25 Jul 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 26 Jul 2020
❤1
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!
![stale[bot] picture](https://avatars3.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 16 Aug 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
aericson
·
97Comments
bpeab
·
70Comments
dmmarmol
·
57Comments
![dependencies[bot] picture](https://avatars1.githubusercontent.com/in/2310?v=4&s=40)
dependencies[bot]
·
142Comments
moimikey
·
67Comments