Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webpack Failed to build the preview #8

Open
Godknowsegi opened this issue Nov 28, 2023 · 0 comments
Open

Webpack Failed to build the preview #8

Godknowsegi opened this issue Nov 28, 2023 · 0 comments

Comments

@Godknowsegi
Copy link

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/demo-ui-library@0.0.1 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 :


    

  1. 

    Clone repo, run  npm i
    

    2. 

  2. 

    Storybooks complain about dependency conflict and outdated run npx storybook upgrade
    

    3. 

  3. 

    after successful upgrade run npm run storybook
    

    4.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Godknowsegi