Webpack Failed to build the preview #8
Description
ISSUE: Storybook complained about the version been outdated, i ran npx storybook upgrade command to update all storybook dependency to latest, which was successful
ERROR: After successful upgrade i ran npm run storybook to start storybook and preview my components following your example, i ran into this error linking to @storybook\builder-webpack5
PACKAGE JSON:
"dependencies": {
"prop-types": "^15.8.1",
"styled-components": "^5.3.10"
},
"devDependencies": {
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"@rollup/plugin-commonjs": "^24.1.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^11.1.0",
"@storybook/addon-essentials": "7.6.0",
"@storybook/addon-interactions": "7.6.0",
"@storybook/addon-links": "7.6.0",
"@storybook/blocks": "7.6.0",
"@storybook/react": "7.6.0",
"@storybook/react-webpack5": "7.6.0",
"@storybook/testing-library": "0.2.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.1",
"@types/react": "^18.2.2",
"@types/styled-components": "^5.1.26",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"rollup": "^3.0.0",
"rollup-plugin-dts": "^5.3.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"storybook": "7.6.0",
"typescript": "^5.0.4"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "18.2.0"
}
#
ERROR LOG :
@dom000/[email protected] storybook
storybook dev -p 6006
@storybook/cli v7.6.0
info => Starting manager..
WARN No story files found for the specified pattern: src\**\*.mdx
info => Starting preview..
info Using Babel compiler
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
[webpack-dev-middleware] wait until bundle finished
[webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
ERROR in ./node_modules/markdown-to-jsx/dist/index.modern.js
Module build failed (from ./node_modules/@storybook/preset-react-webpack/dist/loaders/react-docgen-loader.js):
TypeError: Attempted to resolveName for an unsupported path. resolveName does not accept ObjectMethod".
at resolveName (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\utils\getMemberExpressionValuePath.js:72:9)
at getMemberExpressionValuePath (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\utils\getMemberExpressionValuePath.js:91:21)
at getMemberValuePath (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\utils\getMemberValuePath.js:95:62)
at resolveToValue (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\utils\resolveToValue.js:139:66)
at isReactBuiltinReference (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\utils\isReactBuiltinReference.js:61:51)
at isReactBuiltinCall (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\utils\isReactBuiltinCall.js:41:53)
at Object.enter (C:\Users\hp\Desktop\demo-ui-library\node_modules\react-docgen\dist\handlers\componentMethodsHandler.js:74:48)
at NodePath._call (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:46:20)
at NodePath.call (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:36:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:82:31)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitSingle (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:65:19)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:109:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitMultiple (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:61:17)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:107:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitMultiple (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:61:17)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:107:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitSingle (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:65:19)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:109:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitMultiple (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:61:17)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:107:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitSingle (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:65:19)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:109:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitMultiple (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:61:17)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:107:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
at TraversalContext.visitQueue (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:86:16)
at TraversalContext.visitSingle (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:65:19)
at TraversalContext.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\context.js:109:19)
at traverseNode (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
at NodePath.visit (C:\Users\hp\Desktop\demo-ui-library\node_modules\@babel\traverse\lib\path\context.js:88:52)
@ ./node_modules/@storybook/blocks/dist/index.mjs 10:0-39 41:6440-6448 101:38-46
@ ./node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs 3:0-81 5:28-43 5:46-55 5:59-69 5:583-587
@ ./node_modules/@storybook/addon-docs/dist/DocsRenderer-NNNQARDV.mjs 1:0-71 1:0-71 1:0-71
@ ./node_modules/@storybook/addon-docs/dist/preview.mjs 1:65-102
@ ./node_modules/@storybook/addon-essentials/dist/docs/preview.js 1:0-51 1:0-51
@ ./storybook-config-entry.js 9:349-467 33:2-36:4 33:1193-36:3
preview compiled with 1 error
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
at starter (.\node_modules\@storybook\builder-webpack5\dist\index.js:1:9660)
at starter.next ()
at Module.start (.\node_modules\@storybook\builder-webpack5\dist\index.js:1:11692)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async storybookDevServer (.\node_modules\@storybook\core-server\dist\index.js:66:2459)
at async buildOrThrow (.\node_modules\@storybook\core-server\dist\index.js:60:8290)
at async buildDevStandalone (.\node_modules\@storybook\core-server\dist\index.js:120:1397)
at async withTelemetry (.\node_modules\@storybook\core-server\dist\index.js:65:3948)
at async dev (.\node_modules\@storybook\cli\dist\generate.js:478:401)
at async Command. (.\node_modules\@storybook\cli\dist\generate.js:493:225)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
REPRODUCE ERROR STEPS :
-
Clone repo, run npm i
-
Storybooks complain about dependency conflict and outdated run npx storybook upgrade
-
after successful upgrade run npm run storybook