Storybook: Storybook 5.0.0 emotion-themeing and React loader bug

@afrankel-sfdo Can you remove node_modules and yarn.lock and try again? We've been seeing a lot of weirdness around stuff like this, e.g. https://github.com/storybooks/frontpage/pull/28#issuecomment-468666553

@shilman even on info @storybook/react v5.0.0-rc.10:

rm yarn.lock; rm -Rf node_modules/; yarn; yarn storybook

Error: Cannot find module 'emotion-theming/package.json'

That's really bizarre. Can you provide a repro? Not seeing that in my CRA test app or in my Gatsby test app

I have the same thing with @storybook/[email protected]

edit: 3rd time deleting package-lock.json & node_modules did the trick for me

Have the same issue here in @storybook/[email protected] running on Mac OSX
However removing yarn.lock file is not an option in our process

same issue on 5.0.0 and I also noticed low down...

ModuleParseError: Module parse failed: Unexpected token (20:24)
You may need an appropriate loader to handle this file type.
|       console.info('HMR Configured');
|       module.hot.accept('layouts/App', () => {
>         ReactDOM.render(<App />, document.getElementById('root'));
|       });
|     }

    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-actions": "5.0.0",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-info": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-links": "5.0.0",
    "@storybook/addon-notes": "5.0.0",
    "@storybook/addon-storyshots": "5.0.0",
    "@storybook/addon-viewport": "5.0.0",
    "@storybook/addons": "5.0.0",
    "@storybook/core": "5.0.0",
    "@storybook/react": "5.0.0",

A fresh storybook install works fine, haven't tracked down what in our project might be causing these issues.

@afrankel-sfdo I'm seeing the same issue. My current theory is the lack of @emotion/core causes the ModuleParseError. I ran npm i @emotion/core @emotion/styled which seemed to resolve the issue. Weirdly, I did notice that those two deps are removed from the package-lock.json, although I have no idea why. I removed them from the package.json and left the package-lock.json with them, and I think I'm back in business, although it doesn't really explain what happened.

Update: Noticed this when running npm ls @emotion/core after the above steps:

[email protected] /Users/jamesdigioia/Code/compiq/web
├── @emotion/[email protected]  extraneous
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └── @emotion/[email protected]

npm ERR! extraneous: @emotion/[email protected] /Users/jamesdigioia/Code/compiq/web/node_modules/@emotion/core

@emotion/core isn't being hoisted to the root, where the build is expecting it (it's extraneous because it's no longer in my package.json). require.resolve is called in @storybook/ui/paths.js, but it's only installed under @storybook/theming, so it's nested in the node_modules in that folder, which means that the require.resolve in @storybook/ui can't find it.

I want to say the solution is to add @emotion/{core,styled} as a dependency to @storybook/ui, since @storybook/ui is looking for it.

Another update: If you don't want to delete your package-lock.json, npm dedupe seems to have solved the issue for me.

@FrAgFo0d Does it work if you delete your yarn.lock? You don't need to check in your change, but it would be useful to know if that solution works for you. We'll get to the bottom of it eventually, but for now it feels like a yarn bug...

I have the same issue and couldn't resolve it by deleting the yarn.lock

yarn add @emotion/core @emotion/styled immediately resolved it though

I was getting some really weird emotion related errors. Deleting node_modules, yarn.lock and running yarn cache clean before installing fixed the issue for me.

Maybe the issue is related to two different emotion versions being used by storybook/core and storybook/theming. This is all very weird, I just can't get past this. When I install the emotion libraries manually, it builds, but I get errors in the browser (Cannot read property 'Consumer' of undefined at ThemeProvider) and nothing renders.

It worked in a pristine CRA app, but in my custom Webpack setup it doesn't. I am trying to setup storybooks for our React Native Web component library. Here's my test repo: https://github.com/MrLoh/universal-react-storybook

Downgrading to storybook 4.1.13 solved the issue, so maybe it's an incompatibility in my project between storybook/react and storybook/react-native with different versions

@MrLoh

I also encountered this issue ( I use @storybook/vue though).
And I found that one of the packages in package.json depended on old @storybook/addons package which depended on old @emotion/* package internally.

As a workaround, I wrote resolutions field for that library, and that solved the issue for me.

  "resolutions": {
    "my-old-library/@storybook/addons":"^5.0.0"
  }

@FrAgFo0d Does it work if you delete your yarn.lock? You don't need to check in your change, but it would be useful to know if that solution works for you. We'll get to the bottom of it eventually, but for now it feels like a yarn bug...

I wish it did, but after doing this I cannot say the problem is caused by other items being installed with non-matching versions or by storybook itself.

I can try yarn add @emotion/core @emotion/styled to see if it is resolved. `
However I rather not add more dependancies in my own project ;)

Worked for us to add @storybook/theming as an explicit dependency

I just encountered same problem on Mac OSX, on Windows everything works fine on Mac I had to run npm i @emotion/core @emotion/styled to make it work

Had the same problem with [email protected], homburg solution worked for me

Removing the yarn.lock file was not an option for me (and I would recommend against doing that in most cases). We were able to fix it by..

$ rm -rf node_modules
$ yarn cache clean
$ yarn remove @storybook/core @storybook/theming [all other storybook deps]
$ yarn add -D @storybook/core @storybook/theming ....

hope this helps anyone else running into this issue

+1 same for us. Only solution in this thread that worked was reverting to storybook 4

I also had this issue with
@storybook/react: 5.0.3
MacOs Mojave
Resolved with:

yarn add --dev @emotion/core -W
yarn add --dev emotion-theming -W

We encountered the same issue after an upgrade from v5.0.3 to v5.0.5.

Resolved with:
yarn add --dev @storybook/theming

I am still getting this issue. I have the latest of the following:

• @storybook/theming
• @emotion/core
• @emotion/styled

All the cache clearing did not work. It is still trying to find the old emotion-theming package:

info => Loading presets
WARN   Failed to load preset: "/Users/areardon/code/react-beautiful-dnd/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

I installed emotion-theming package and everything is working..

Fixed it just like @alexreardon, by installing emotion-theming: https://emotion.sh/docs/emotion-theming was getting the following error:

info @storybook/react v5.0.5
info 
info => Loading presets
WARN   Failed to load preset: "/Users/Felipe/Local_Projects/monorepo/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

I want to say the solution is to add @emotion/{core,styled} as a dependency to @storybook/ui, since @storybook/ui is looking for it.

I agree with @mAAdhaTTah that this will be the right solution. It is wrong to hope that a package manager will hoist the dependency.

Same issue exists with @storybook/react v5.0.6 as well.

Failed to load preset: "/Users/vinkumar2/Documents/Projects/PatternLibs/ReactPatternLib/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module '@emotion/core/package.json'

Adding @emotion/core in DevDependencies helped and Storybook is working. Looks like its missing in package dependencies with @storybook/react.

I've put in a PR for this here: #6435

Egads!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 containing PR #6435 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Alpha version fixed the issue for me, thanks @shilman !

The issue is still persisting in 5.0.10 (by npm logs it's a version after the alpha.23)

error message:

Failed to load preset: "/.../node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'

stack trace:

stack: 'Error: Cannot find module \'emotion-theming/package.json\'\n    
at Function.Module._resolveFilename (module.js:536:15)\n    
at Function.resolve (internal/module.js:18:19)\n   
at Object.<anonymous> (/.../node_modules/@storybook/ui/paths.js:16:38)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)\n    
at Module.require (module.js:579:17)\n    
at require (internal/module.js:11:18)\n    
at Object.<anonymous> (/.../node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    
at Module._compile (module.js:635:30)\n    
at Object.Module._extensions..js (module.js:646:10)\n    
at Module.load (module.js:554:32)\n    
at tryModuleLoad (module.js:497:12)\n    
at Function.Module._load (module.js:489:3)',

@Stralos this fix is in the 5.1.X release branch, which currently is still in alpha (5.1.0-alpha.33).

@BrendanAnnable @alexlafroscia @devrelm Should I patch the fix back into 5.0.x?

@shilman Not sure what the storybook release schedule is (e.g. for 5.1.x), but this is blocking a number of projects upgrading to storybook 5, so I'd love for this fix to hit some non-alpha release if possible 🙂

The problem here is that yarn (or npm) is weirdly (in this case, not) hoisting packages. yarn list or yarn why outputs are faulty too:

% yarn why emotion-theming
yarn why v1.15.2
[1/4] 🤔  Why do we have the module "emotion-theming"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#some_project#@storybook#addon-actions#@storybook#theming" depends on it
   - Hoisted from "_project_#some_project#@storybook#addon-actions#@storybook#theming#emotion-theming"
✨  Done in 1.74s.

% yarn list emotion-theming
yarn list v1.15.2
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
✨  Done in 1.86s.

% find . -type d -name emotion-theming
./some_project/node_modules/@storybook/addon-actions/node_modules/emotion-theming
./some_project/node_modules/@storybook/theming/node_modules/emotion-theming
./node_modules/@storybook/ui/node_modules/emotion-theming
./node_modules/@storybook/router/node_modules/emotion-theming

As you can see, yarn is reporting that there's only one emotion-theming package, which should be hoisted to root, but it's not the case: It's duplicating the package in 4 places across different packages. Whether it's a yarn/npm bug, I'm not sure. Maybe the combination of dependencies' dependencies and peerDependencies is causing this weird behavior? My storybook setup fails when I have different major versions of storybooks packages, e.g. @storybook/[email protected] and @storybook/[email protected] side by side.

I also think that our combination of having a monorepo yarn workspace and top-level nohoisting could also be factors in causing this problem:

"workspaces": { "nohoist": [ "some_project/*", "some_project/@*/*", ], "packages": [ "some_project", ] },

I'm also experience the same problems but seems that most of the above solutions didn't fix the issue for me.
I also tried the alpha version and still getting the error.
The problem for me still look like that two different packages are looking for two different version of @emotion/core so manual installation works but there is always one of the two packages that are complaining for the missing version.

/[email protected] /repos/ui
├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── @emotion/[email protected]  deduped
├─┬ @storybook/[email protected]
│ └── @emotion/[email protected]
└─┬ @storybook/[email protected]
  └─┬ @storybook/[email protected]
    └─┬ @storybook/[email protected]
      └── UNMET PEER DEPENDENCY @emotion/[email protected]

npm ERR! peer dep missing: @emotion/core@^10.0.0, required by [email protected]

I also try to manually add npm i @storybook/theming but still no luck.

@devrelm your fix (#6435 ) should work even with npm, and not just yarn.. correct?

@whyayala that worked for me, thanks!

Upgraded to 5.x, ran into the bug and I've just updated to 5.1.9 with exactly the same problem.

That said, i'm only getting one version of @emotion/core (10.0.10)

@alasdairhurst I also ran Into this problem.

you can see it on this demo project with CRA
https://github.com/marco-silva0000/cra-test-pnp-storybook

Worked for us to add @storybook/theming as an explicit dependency

Did you ever understand why it helped? Because it helped for us as well, which is great! But I dont understand why :P

If this may help anyone - I got this error too, and it took me a while to realize that I was installing the package outside of the website folder... That's why it didn't find the package.json...