Storybook: Storybook setup with Tailwind and Emotion

[WebTerminator]

Describe the bug
When setting up Emotion with Tailwind I get the following error: Module not found: Error: Can't resolve '@emotion/styled/base'

Expected behavior
Should be able to use Emotion with Tailwind

Screenshots

Additional context
my package.json file:

"dependencies": {
"@babel/core": "^7.8.4",
"@emotion/babel-plugin": "^11.0.0-next.13",
"@emotion/core": "^10.0.27",
"@emotion/css": "^11.0.0-next.12",
"@emotion/react": "^11.0.0-next.15",
"@emotion/server": "^11.0.0-next.14",
"@emotion/styled": "^11.0.0-next.15",
"@material-ui/core": "^4.9.1",
"@storybook/addon-actions": "^6.0.12",
"@storybook/addon-knobs": "^6.0.12",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addons": "^6.0.1",
"@storybook/react": "^6.0.1",
"@tailwindcss/ui": "^0.5.0",
"@tailwindcssinjs/macro": "^0.7.2",
...

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

Try running Storybook with the --no-dll flag?

[mverissimo]

The same problem here using emotion 11, I try this flag but this doesn't work. I'm trying to find some solution, but nothing at moment.

[shilman]

@mverissimo did you try 6.1?

npx sb upgrade --prerelease

[mverissimo]

@shilman Yes, but don`t work! And have another problem #10231

I will try to find a solution, thanks!

[Keysox]

I just ran into this and resolved it by switching @emotion/styled to @storybook/theming, which forces emotion to use a single version. This was caused by one of our dependencies relying on version 10 while we were trying to upgrade to 11.

[pgrekovich]

@mverissimo try to disable @emotion/babel-plugin

[mverissimo]

Hi, @pgrekovich I solved this with this approach the difference is that I add @emotion/styled on an alias too.

[pgrekovich]

babel-preset-css-prop insted of @emotion/babel-plugin fixed the problem

[mj12albert]

Hi, @pgrekovich I solved this with this approach the difference is that I add @emotion/styled on an alias too.

How did you alias @emotion/styled ? I tried but still getting stuck at Can't resolve '@emotion/styled/base'