storybook: Storybook 5.0.0 emotion-themeing and React loader bug

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

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

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

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

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

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

compiq-web@0.1.0 /Users/jamesdigioia/Code/compiq/web
├── @emotion/core@10.0.7  extraneous
└─┬ @storybook/addon-actions@5.0.0
  └─┬ @storybook/theming@5.0.0
    └── @emotion/core@10.0.7

npm ERR! extraneous: @emotion/core@10.0.7 /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.

I have the same thing with @storybook/react@5.0.0

edit: 3rd time deleting package-lock.json & node_modules did the trick 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

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

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

Had the same problem with storybook@5.0.0, homburg solution worked for me

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

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

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…

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

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.

@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.

@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 @alexlafroscia @devrelm Should I patch the fix back into 5.0.x?

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 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

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 "emotion-theming@10.0.10"
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.
└─ emotion-theming@10.0.10
✨  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/react@5.0.10 and @storybook/react-native@4.1.18 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",
  ]
},```

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.

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 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

@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"
  }