-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Gatsby link and Storybook #22065
Comments
@darylthornhill thanks for taking the time to open up an issue and follow up with us. To give you some context, we're aware of the fact, and another community member already reached out to us with a similar question (e.g. #21958) regarding Gatsby, and we're gathering information and see how best to address this so that not only you but other Gatsby users are able to set up and use Storybook without any issues and hopefully "cross the bridge" (pardon the bad pun) and follow up with the Gatsby maintainers and make the required changes to the documentation as well. Edit: I just updated the issue title for clarity. Hope you don't take it the wrong way 🙏 |
Sure, that makes a lot of sense. That other issue you mentioned does look slightly different, as that looks like someone is having a problem with a Gatsby repo that has a custom babel setup already conflicting with the one you are providing from storybook (If ive understood that right?!). The issue I am describing is a fresh Gatsby setup, with a fresh storybook where using anything from Gatsby, in my case If that comes under the same boat from your end in your internals though, that would make sense. Either way, any progress would be handy, i'll watch the other issue regardless! Thanks for your response. |
Did you try the steps mentioned in Gatsby docs regarding the
That custom babel setup is just a minimal example from Gatsby docs, it's not really that custom in my opinion. It's actually probably just There's myriad of issues and some of them can be bypassed by it seems that there's no easy way to get Storybook 7 to work with Gatsby v4 or v5. @jonniebigodes Should we have somekind of a umbrella discussion related to these issues with Gatsby? It seems that even the Storybook frontpage -repo is suffering from these same issues: storybookjs/frontpage@main...upgrade-to-sb-7 . I explored these same changes on my own project what @kylegach has done there. The Gatsby docs are hugely outdated and I have no problem to contribute on updating them but I currently have nowhere to go as I'm not really familiar with Storybook and getting anything to work seems to be a huge task. |
Gatsby maintainer here 👋 |
Hello :) I came here from issue: #21958 |
For those who may came across this issue, I managed to get my storybook (7.1) and gatsby (5.11) working with the combination of a few different changes listed above. From Gatsby recommended changes, apply the configuration needed for You will most likely came across another error As identified by @oskari above, storybook did have similar issue which was fixed by changing Once that is working, your storybook will then start building but may left with |
This was mostly turnkey, since Storybook provides a command for automatically upgrading and even updating configuration files. One manual change that was necessary was to update the Storybook webpack configuration, which was described in terms of patching the existing webpack configuration. The patched rule changed from array index 0 to 2, so we had to update the indexes in our webpack configuration. This matches the changes described in storybookjs/storybook#22065 (comment)
This was mostly turnkey, since Storybook provides a command for automatically upgrading and even updating configuration files. One manual change that was necessary was to update the Storybook webpack configuration, which was described in terms of patching the existing webpack configuration. The patched rule changed from array index 0 to 2, so we had to update the indexes in our webpack configuration. This matches the changes described in storybookjs/storybook#22065 (comment)
This was mostly turnkey, since Storybook provides a command for automatically upgrading and even updating configuration files. One manual change that was necessary was to update the Storybook webpack configuration, which was described in terms of patching the existing webpack configuration. The patched rule changed from array index 0 to 2, so we had to update the indexes in our webpack configuration. This matches the changes described in storybookjs/storybook#22065 (comment)
Can somebody create example boilerplate repo at GitHub where Gatsby 5 will work with Storybook 7? I need Gatsby style import using modules to work out of the box in Storybook as well
Plus most of my components are getting data using It seems to me that Gatsby team has no time for Storybook integration? And Storybook team is also busy with their stuff... |
Hi! I'm trying to install storybook on my gatsby project and encountering the same issue with storybook 8.2 and gatsby 5.13. I can confirm that everything was working fine until i brought a component that used Gatsby link. I also blocked at Here's where i'm blocking: I've refactored the
import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-webpack5-compiler-swc",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
"@storybook/addon-styling-webpack",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
webpackFinal: async (config: any) => {
// finding the rule based on targetting the loader to be less random
const rule = config.module.rules.find((rule: any) => {
const [useItem] = rule?.use || [];
if (!useItem) {
return false;
} else {
return useItem?.loader?.includes("webpack"); // i'm assuming we're targetting the webpack loader
}
});
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
rule.exclude = [/node_modules\/(?!(gatsby|gatsby-script)\/)/];
// Remove core-js to prevent issues with Storybook
// ❗️ isn't this overwriting the previous declaration?
rule.exclude = [/core-js/];
// Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
if (!rule.use[0]?.options) {
rule.use[0].options = {
plugins: [require.resolve("babel-plugin-remove-graphql-queries")],
};
} else {
rule.use[0].options.plugins = [
...(rule.use[0].options?.plugins || []),
require.resolve("babel-plugin-remove-graphql-queries"),
];
}
config.module.rules = [rule, ...config.module.rules];
config.resolve.mainFields = ["browser", "module", "main"];
return config;
},
};
export default config; I think i'm doing something similar to the previous suggested configuration, the undefined console errors are gone, but now i get this:
maybe something wrong with the 2 for reference here's my preview file:
import type { Preview } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import "../src/styles/index.css";
global.___loader = {
enqueue: () => {},
hovering: () => {},
};
global.__BASE_PATH__ = "/";
window.___navigate = (pathname) => {
action("NavigateTo:")(pathname);
};
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview; Help would be appreciated 🙏 |
Describe the bug
Storybook is great, we've just upgraded gatsby and need to upgrade storybook. Both normally work absolutely fine.
Looking at gatsby's documentation, this hasn't been updated for storybook v7 yet, and parts of the systems working together doesn't work.
I've tried in existing and a fresh gatsby and storybook installation (github linked below)
Example, when using a gatsby
<Link>
component in a story, the system errors.To Reproduce
https://github.com/darylthornhill/test-gatsby-storybook-error
All i've done is set up a gatsby Link and put it in the
Header.tsx
in thesrc/stories
folder.System
Additional context
No response
The text was updated successfully, but these errors were encountered: