demo-ui-library icon indicating copy to clipboard operation
demo-ui-library copied to clipboard

Published 20 hours ago • verified publisher icon Timonwa

Webpack Failed to build the preview

Open Godknowsegi opened this issue 2 years ago • 0 comments

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 :


    

  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.

Godknowsegi avatar Nov 28 '23 15:11 Godknowsegi