storybook: Storybook v5.0.5 upgrade broken

Describe the bug Using yarn upgrade-interactive --latest I just upgraded from Storybook v5.0.3 to v5.0.5 and it broke my build. Does Storybook v5.0.5 work at all? I tried upgrading two different projects and both broke.

Console output

yarn run v1.13.0
$ start-storybook -p 9009 -s public
info @storybook/react v5.0.5
info
info => Loading static files from: /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/public .
info => Loading presets
WARN   Failed to load preset: "/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module '@emotion/core/package.json'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:28:19)
ERR!     at Object.<anonymous> (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/ui/paths.js:6:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:734:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:626:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:558:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:663:17)
ERR!     at require (internal/modules/cjs/helpers.js:20:18)
ERR!     at Object.<anonymous> (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:734:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:626:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:558:3)
ERR!  { Error: Cannot find module '@emotion/core/package.json'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:28:19)
ERR!     at Object.<anonymous> (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/ui/paths.js:6:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:734:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:626:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:558:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:663:17)
ERR!     at require (internal/modules/cjs/helpers.js:20:18)
ERR!     at Object.<anonymous> (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:734:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:626:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:558:3)
ERR!   stack:
ERR!    "Error: Cannot find module '@emotion/core/package.json'\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)\n    at Function.resolve (internal/modules/cjs/helpers.js:28:19)\n    at Object.<anonymous> (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/ui/paths.js:6:36)\n    at Module._compile (internal/modules/cjs/loader.js:734:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)\n    at Module.load (internal/modules/cjs/loader.js:626:32)\n    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)\n    at Function.Module._load (internal/modules/cjs/loader.js:558:3)\n    at Module.require (internal/modules/cjs/loader.js:663:17)\n    at require (internal/modules/cjs/helpers.js:20:18)\n    at Object.<anonymous> (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    at Module._compile (internal/modules/cjs/loader.js:734:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)\n    at Module.load (internal/modules/cjs/loader.js:626:32)\n    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)\n    at Function.Module._load (internal/modules/cjs/loader.js:558:3)",
ERR!   code: 'MODULE_NOT_FOUND' }
info => Loading presets
info => Loading custom webpack config (full-control mode).
info => Loading create-react-app config.
 10% building 4/5 modules 1 active ...oc-css-komponenter/.storybook/config.js

WARN force closed preview build

WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src' in '/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter'
    at moduleFactory.create (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:980:31)
    at factory (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/neo-async/async.js:2825:7
    at /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
resolve './src' in '/Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter'
  using description file: /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src is not a file
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src.json doesn't exist
      as directory
        existing directory
          using path: /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src/index
            using description file: /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/package.json (relative path: ./src/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src/index doesn't exist
              .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src/index.wasm doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src/index.js doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/fl-macbook-retina/Dropbox/Projects/poc-css-komponenter/src/index.json doesn't exist
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

System:

OS: macOS Mojave
Device: Macbook Pro
Framework: React
Version: v5.0.5

git diff package.json

diff --git a/package.json b/package.json
index ead4ddb..e9f8d5f 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,11 @@
   "private": true,
   "dependencies": {
     "@types/jest": "24.0.11",
-    "@types/node": "11.11.4",
+    "@types/node": "11.11.6",
     "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "@types/react-dom": "16.8.3",
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
     "react-scripts": "2.1.8",
     "typescript": "3.3.4000"
   },
@@ -31,14 +31,14 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.4.0",
-    "@storybook/addon-a11y": "^5.0.3",
-    "@storybook/addon-actions": "^5.0.3",
-    "@storybook/addon-info": "^5.0.3",
-    "@storybook/addon-knobs": "^5.0.3",
-    "@storybook/addon-links": "^5.0.3",
-    "@storybook/addon-storysource": "^5.0.3",
-    "@storybook/addons": "^5.0.3",
-    "@storybook/react": "^5.0.3",
+    "@storybook/addon-a11y": "^5.0.5",
+    "@storybook/addon-actions": "^5.0.5",
+    "@storybook/addon-info": "^5.0.5",
+    "@storybook/addon-knobs": "^5.0.5",
+    "@storybook/addon-links": "^5.0.5",
+    "@storybook/addon-storysource": "^5.0.5",
+    "@storybook/addons": "^5.0.5",
+    "@storybook/react": "^5.0.5",
     "babel-loader": "^8.0.5"
   }
 }

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 17
Comments: 31 (7 by maintainers)

Most upvoted comments

Still running into this. Not very pleasant.

+58

florianmartens on Feb 12, 2022

Strangely it seems to work after deleting node_modules and yarn.lock and running yarn again…

monsterkrampe on Mar 25, 2019

I upgraded to Webpack 5 and encountered the same issue. After I browsed the documents, and add lazyCompilation: true fixed the problem.

// .storybook/main.js

module.exports = {
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
      },
    },
  },
};

ryrocks on Aug 12, 2022

@shilman Does it make sense to lock this issue as it is has been resolved?

kakadiadarpan on Nov 11, 2019

Any workaround for this? Im also having this issue as well…

Fer0494 on Apr 26, 2022

This might be helpful: https://storybook.js.org/docs/react/builders/webpack#typescript-module-resolution

garvae on Dec 16, 2022

I have the same error:

ModuleNotFoundError: Module not found: Error: Can't resolve '../src/themes' in '/Users/jcampalopez/Projects/tangram/storybook'
    at factory.create (/Users/jcampalopez/Projects/tangram/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/Users/jcampalopez/Projects/tangram/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/jcampalopez/Projects/tangram/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/jcampalopez/Projects/tangram/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/jcampalopez/Projects/tangram/node_modules/neo-async/async.js:2825:7
    at /Users/jcampalopez/Projects/tangram/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/jcampalopez/Projects/tangram/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/jcampalopez/Projects/tangram/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/jcampalopez/Projects/tangram/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/jcampalopez/Projects/tangram/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn43 (eval at create (/Users/jcampalopez/Projects/tangram/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:402:1)
    at hook.callAsync (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/jcampalopez/Projects/tangram/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/Users/jcampalopez/Projects/tangram/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
resolve '../src/themes' in '/Users/jcampalopez/Projects/tangram/storybook'
  using description file: /Users/jcampalopez/Projects/tangram/package.json (relative path: ./storybook)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/jcampalopez/Projects/tangram/package.json (relative path: ./src/themes)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/jcampalopez/Projects/tangram/src/themes is not a file
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/jcampalopez/Projects/tangram/src/themes.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/jcampalopez/Projects/tangram/src/themes.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /Users/jcampalopez/Projects/tangram/src/themes.jsx doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/jcampalopez/Projects/tangram/src/themes.json doesn't exist
      as directory
        existing directory
          using path: /Users/jcampalopez/Projects/tangram/src/themes/index
            using description file: /Users/jcampalopez/Projects/tangram/package.json (relative path: ./src/themes/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/jcampalopez/Projects/tangram/src/themes/index doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/jcampalopez/Projects/tangram/src/themes/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/jcampalopez/Projects/tangram/src/themes/index.js doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                /Users/jcampalopez/Projects/tangram/src/themes/index.jsx doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/jcampalopez/Projects/tangram/src/themes/index.json doesn't exist
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @xivart/tangram@5.11.9 storybook: `npm run build:assets && STORYBOOK_LOCAL=true start-storybook -p 9001 -s ./assets -c storybook`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @xivart/tangram@5.11.9 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jcampalopez/.npm/_logs/2019-03-27T07_57_57_994Z-debug.log

It seems the issue is with webpack resolvers, for some reason is ignoring the custom webpack configuration.

jcampalo on Mar 27, 2019

This might be helpful: https://storybook.js.org/docs/react/builders/webpack#typescript-module-resolution

Yes, adding the below snippet to .storybook/main.ts did the trick. Thanks @garvae!

  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        "@": path.resolve(__dirname, "../"),
      };
    }
    return config;
  },

sethburtonhall on Aug 30, 2023

I’ve just run into this issue creating a new create-react-app + typescript + storybook. I believe the issue probably was that I didn’t run the yarn start to start the CRA dev server, and create the tsconfig, as per the instructions here: https://create-react-app.dev/docs/adding-typescript

dwjohnston on May 15, 2021

I’ve managed to solve the issue by changing the fallback Webpack configuration:

    config.resolve.fallback = {
      crypto: false,
      path: require.resolve("path-browserify")
    }

@AriaMoradpour, @haase1020

zielinsm on Apr 29, 2021

xD I just had this error. Reinstalling node_modules helped.

hasparus on Mar 3, 2020

@shilman Haha, I’ve already unsubscribed actually. 😜 😂

Was just thinking that since it has been fixed in the later version, maybe it’s a good idea to lock it down. But I also agree with your point that some useful comments can come many months later.

PS: Thanks for all the work done on Storybook(and I mean everyone who has contributed to Storybook). 🙌

kakadiadarpan on Nov 11, 2019

@kakadiadarpan What, you don’t like being reminded of Storybook upgrade pains from earlier this year? 😜

I haven’t locked any issues yet, mostly since useful comments can come many months after the fact. I’d recommend unsubscribing from the issue if you don’t want notifications.

shilman on Nov 11, 2019

Same here, but the problem is when you upgrade React to v16.8.5 along with storybook v5.0.5 (React v16.8.4 seems to work)

Adrien-D on Mar 25, 2019