Storybook: Storybook 5.0.0 emotion-themeing and React loader bug
Describe the bug
When starting up Storybook 5.0.0-rc.8 see the following error:
info @storybook/react v5.0.0-rc.8
info
info => Loading static files from: /Users/afrankel/Code/makana-platform/nani/public .
info => Loading presets
WARN Failed to load preset: "/Users/afrankel/Code/makana-platform/nani/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR! at Object.<anonymous> (/Users/afrankel/Code/makana-platform/nani/node_modules/@storybook/ui/paths.js:16:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:702:30)
To Reproduce
- yarn
- yarn storybook
Expected behavior
Starts up without issue
Additional context
Adding yarn add emotion-theming@^10.0.7 -D to project gets past this error
afrankel-sfdo
All 42 comments
@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
on 2 Mar 2019
@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'
afrankel-sfdo
on 4 Mar 2019
That's really bizarre. Can you provide a repro? Not seeing that in my CRA test app or in my Gatsby test app
shilman
on 4 Mar 2019
I have the same thing with @storybook/[email protected]
edit: 3rd time deleting package-lock.json & node_modules did the trick for me
Itrulia
on 5 Mar 2019
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
FrAgFo0d
on 5 Mar 2019
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
on 5 Mar 2019
@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.
mAAdhaTTah
on 5 Mar 2019
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.
mAAdhaTTah
on 5 Mar 2019
Another update: If you don't want to delete your package-lock.json, npm dedupe seems to have solved the issue for me.
mAAdhaTTah
on 5 Mar 2019
@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...
shilman
on 5 Mar 2019
I have the same issue and couldn't resolve it by deleting the yarn.lock
MrLoh
on 5 Mar 2019
yarn add @emotion/core @emotion/styled immediately resolved it though
MrLoh
on 5 Mar 2019
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.
vpicone
on 5 Mar 2019
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
MrLoh
on 5 Mar 2019
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
on 5 Mar 2019
@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"
}
simezi
on 6 Mar 2019
@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 ;)
FrAgFo0d
on 6 Mar 2019
Worked for us to add @storybook/theming as an explicit dependency
homburg
on 6 Mar 2019
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
insanepl
on 6 Mar 2019
Had the same problem with [email protected], homburg solution worked for me
juanscilingo
on 10 Mar 2019
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
cdriscol
on 20 Mar 2019
+1 same for us. Only solution in this thread that worked was reverting to storybook 4
adamrisser
on 20 Mar 2019
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
whyayala
on 21 Mar 2019
We encountered the same issue after an upgrade from v5.0.3 to v5.0.5.
Resolved with:
yarn add --dev @storybook/theming
christianheine
on 25 Mar 2019
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..
alexreardon
on 26 Mar 2019
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'
fillipvt
on 28 Mar 2019
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.
vkrol
on 3 Apr 2019
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.
vinodloha
on 6 Apr 2019
I've put in a PR for this here: #6435
devrelm
on 7 Apr 2019
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.
shilman
on 8 Apr 2019
Alpha version fixed the issue for me, thanks @shilman !
alexlafroscia
on 12 Apr 2019
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
on 23 Apr 2019
@Stralos this fix is in the 5.1.X release branch, which currently is still in alpha (5.1.0-alpha.33).
BrendanAnnable
on 23 Apr 2019
@BrendanAnnable @alexlafroscia @devrelm Should I patch the fix back into 5.0.x?
shilman
on 23 Apr 2019
@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 🙂
BrendanAnnable
on 25 Apr 2019
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",
]
},
SEAPUNK
on 25 Apr 2019
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?
gsambrotta
on 30 Apr 2019
@whyayala that worked for me, thanks!
Shaneprrlt
on 10 May 2019
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
on 24 Jun 2019
@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
marco-silva0000
on 26 Jun 2019
Worked for us to add
@storybook/themingas 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
vongohren
on 23 Dec 2019
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...
yaelfish
on 12 May 2020
Related issues
MrOrz
·
3Comments
xogeny
·
3Comments
shilman
·
3Comments
ZigGreen
·
3Comments
miljan-aleksic
·
3Comments
Most helpful comment
Worked for us to add
@storybook/themingas an explicit dependency