Storybook throw error if used emotion 11 #13277
Comments
|
The problem seems to be in the I made a repository where the problem is reproduced: storybook-emotion-bug |
|
You need to use babel-preset-css-prop to development and |
|
You are right, thanks! |
|
Even with @emotion removed from plugins and I add "@emotion/babel-preset-css-prop" to presets I still getting
Their documents suggests it pulls in the plugin anyways.
|
|
Same here. |
1 similar comment
|
Same here. |
|
If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize! |
|
In my opinion this issue should be reopened. I'm really stuck with this. I had to downgrade to |
|
So, share a repro case with us, and maybe we can help you. |
|
I changed webpack.config in Storybook and it helped! const toPath = (_path) => path.join(process.cwd(), _path) module.exports = { |
With this repository the error can be reproduced: https://github.com/openscript/react-section-dividers/tree/feat/emotion11
Environment: |
|
Hi, did you try the solution above? This looks like works! |
I've changed my It's builds, but I've a runtime error: I don't know. Cannot figure out this. With Emotion 10 everything works flawlessly |
|
Stranger, I do the same thing e here works fine, try to generate a new yarn.lock and please commit these changes to be possible to make tests here. |
|
What I did:
I've pushed the changes to the repo and branch mentioned above.
|
|
After I removed |
|
By adding I also needed to change the definition of the actions addon. Please see: https://github.com/openscript/react-section-dividers/blob/0f22f4c483ed5f1abf226a73001bd91276797281/.storybook/main.js Thank you @mverissimo and @mavlikwowa for looking into this. 🎄 |
|
@openscript after updating my Here is my const path = require('path');
const toPath = (_path) => path.join(process.cwd(), _path);
module.exports = {
stories: ['../**/*.stories.js'],
addons: ['@storybook/addon-essentials'],
webpackFinal: async (config) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'@emotion/core': toPath('node_modules/@emotion/react'),
'@emotion/styled': toPath('node_modules/@emotion/styled'),
'emotion-theming': toPath('node_modules/@emotion/react'),
},
},
};
},
}; |
|
@cmwhited Have you deleted the cache ( |
|
Yeah I deleted the |
|
Very strange, indeed. Can you try mine? https://github.com/openscript/react-section-dividers/tree/feat/emotion11
|
|
@openscript thanks for the fix! I can confirm that the fix works for me. 👍 Note: my project uses Gatsby, TypeScript, Emotion (I use styled and the css prop), and Storybook. I found this post particularly helpful in resolving issues I was running into using the emotion css prop. Here are the steps I ran through to resolve.
Here is my const webpackFinal = require("./webpack.config")
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
webpackFinal: async config => webpackFinal({ config }),
}And here is my const path = require("path")
const toPath = _path => path.join(process.cwd(), _path)
module.exports = ({ config }) => {
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// use @babel/preset-react for JSX and env (instead of staged presets)
config.module.rules[0].use[0].options.presets = [
require.resolve("@babel/preset-react"),
require.resolve("@babel/preset-env"),
require.resolve("@emotion/babel-preset-css-prop"),
]
// ... other configs
// Add Webpack rules for TypeScript
// ========================================================
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [
["react-app", { flow: false, typescript: true }],
require.resolve("@emotion/babel-preset-css-prop"),
],
// ... other configs
},
})
// ... other configs
config.resolve.extensions.push(".ts", ".tsx")
config.resolve.alias = {
...config.resolve.alias,
"@emotion/core": toPath("node_modules/@emotion/react"),
"@emotion/styled": toPath("node_modules/@emotion/styled"),
"emotion-theming": toPath("node_modules/@emotion/react"),
}
return config
} |
|
I can confirm changing the webpack mapping works as explained in #13277 (comment) See commit |
|
It didn't work for me. I'm using yarn workspaces, so This is what I came up with: const fs = require('fs');
const path = require('path');
function getPackageDir(filepath) {
let currDir = path.dirname(require.resolve(filepath));
while (true) {
if (fs.existsSync(path.join(currDir, 'package.json'))) {
return currDir;
}
const { dir, root } = path.parse(currDir);
if (dir === root) {
throw new Error(`Could not find package.json in the parent directories starting from ${filepath}.`);
}
currDir = dir;
}
}Just replace |
|
@samvv MY HERO! 🔥 |
|
Why is this closed? this is still an issue affecting storybook and emotion 11 |
|
I had the problem (emotion 11) but i have only replaced @emotion/core by @emotion/react in my devDependencies and it's ok now ! |
Some additional aliasing in `.storybook/main.js` resolved the rendering errors we saw previously. For more context, see: storybookjs/storybook#13277 (comment) [#177401579]
Some additional aliasing in `.storybook/main.js` resolved the rendering errors we saw previously. For more context, see: storybookjs/storybook#13277 (comment) [#177401579]
|
Adding this file got it to work for us with JS (although not with TS):
{
"plugins": [
"babel-plugin-macros",
[
"@emotion/babel-plugin-jsx-pragmatic",
{
"export": "jsx",
"import": "__cssprop",
"module": "@emotion/react"
}
],
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "__cssprop"
}
]
]
} |
|
Hey @shilman, the workarounds provided here are all hacky and not a fix. |
|
@HosseinAgha I didn't close the issue. I just referenced it from the Nx repo where we implemented a fix for this. |
|
@HosseinAgha i didn't close this issue. if you want to track the open issue for emotion 11, it is #13145. we are actively working on a proper fix, though it's non-trivial because we are also under the constraints of semver and are not ready to do a major release. |
Describe the bug
Problem with emotion 11 : Module not found: Error: Can't resolve '@emotion/styled/base'
To Reproduce
yarn storybookCode snippets
System
The text was updated successfully, but these errors were encountered: