storybook: @storybook/vue v6.1.x build failure

Describe the bug After upgrading from 6.0.28 to 6.1.2 (also tried with 6.1.0) results in a build failure.

To Reproduce Steps to reproduce the behavior:

Upgrade from 6.0.28 to 6.1.2
Packages “@storybook/addon-viewport”: “6.1.2”, “@storybook/addon-actions”: “6.1.2”, “@storybook/addon-docs”: “6.1.2”, “@storybook/addon-knobs”: “6.1.2”, “@storybook/addon-links”: “6.1.2”, “@storybook/addon-storysource”: “6.1.2”, “@storybook/addons”: “6.1.2”, “@storybook/vue”: “6.1.2”,
run yarn storybook
See “Code Snippets” Error in browser: Cannot GET /

Code snippets

$ yarn storybook
yarn run v1.22.5
$ start-storybook -s ./public -s ./dist -p 6006
info @storybook/vue v6.1.2
info
info => Loading static files from: /Users/[local-path]/dist and serving at / .
info => Loading presets
info => Loading presets
WARN   Failed to load preset: "/Users/[local-path]/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'react-dom/package.json'
ERR! Require stack:
ERR! - /Users/[local-path]/node_modules/@storybook/ui/noop.js
ERR! - ...
...
info => Loading 1 config file in "./.storybook"
info => Loading 6 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
ERR! TypeError: Cannot read property 'publicPath' of undefined
ERR!     at startManager (/Users/[local-path]/node_modules/@storybook/core/dist/server/dev-server.js:324:38)
ERR!     at async Promise.all (index 1)
...
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Using default Webpack setup
...
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.68 KiB {vendors~main} [built]
    + 1974 hidden modules

ERROR in ./node_modules/@storybook/core/dist/client/preview/StoryRenderer.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[local-path]/node_modules/@storybook/core/dist/client/preview'
...
ERROR in ./node_modules/react-popper-tooltip/dist/esm/react-popper-tooltip.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[local-path]/node_modules/react-popper-tooltip/dist/esm'
...

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Firefox: 82.0.3
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: 6.1.2 => 6.1.2
    @storybook/addon-docs: 6.1.2 => 6.1.2
    @storybook/addon-knobs: 6.1.2 => 6.1.2
    @storybook/addon-links: 6.1.2 => 6.1.2
    @storybook/addon-storysource: 6.1.2 => 6.1.2
    @storybook/addon-viewport: 6.1.2 => 6.1.2
    @storybook/addons: 6.1.2 => 6.1.2
    @storybook/vue: 6.1.2 => 6.1.2

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 29 (6 by maintainers)

Most upvoted comments

Installing peer dependencies worked for me. npm install react react-dom react-scripts

seanburman on Feb 25, 2021

Same issue here. ERR! Error: Cannot find module 'react/package.json'

BiancaArtola on Dec 16, 2020

@shilman I’m running into the same problem. I’ve tried clearing node_modules, package-lock.json and yarn.lock and then when I run storybook, I get this:

yarn run v1.19.1
warning package.json: No license field
$ start-storybook --port 3000
info @storybook/react v6.1.6
info
info => Loading presets
info => Loading presets
WARN   Failed to load preset: "./node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:
ERR! - ./node_modules/@storybook/ui/noop.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
ERR!     at resolveFileName (./node_modules/resolve-from/index.js:29:39)
ERR!     at resolveFrom (./node_modules/resolve-from/index.js:43:9)
ERR!     at module.exports (./node_modules/resolve-from/index.js:46:47)
ERR!     at Object.<anonymous> (./node_modules/@storybook/ui/paths.js:17:18)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1137:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:985:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:878:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1025:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at Object.<anonymous> (./node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:34:38)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1137:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:985:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:878:14)

and ends with

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✖ ｢wdm｣: Hash: d7cf1de00d1837717bff
Version: webpack 4.44.2
Time: 25ms
Built at: 11/26/2020 14:21:31

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in './clinical-code-entry'

(I’ve edited folder names)

maheshjag on Nov 26, 2020

I had the exact same issue upgrading to 6.4.13 and its add-ons. I had to do npm install react react-dom --save-dev to fix.

J-HernandezInzunza on Jan 18, 2022

Works like a charm! Thanks a lot

scheinercc on Nov 25, 2020

@scheinercc Can you upgrade and try again npx sb upgrade

shilman on Nov 25, 2020