StoryBook does not work with GatsbyJS #17176
Comments
|
Hi @alfredoperez thanks for reaching out to us with your issue we appreciate it. I've picked up on it and i was able to triage it and hopefully add a solution that will help you and possibly other Storybook users working with Gatsby. Here's the steps I took to triage it:
// .storybook/main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
//"storybook-addon-gatsby"
],
"framework": "@storybook/react",
"core": {
"builder": "webpack5"
},
webpackFinal: async config => {
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
// Remove core-js to prevent issues with Storybook
config.module.rules[0].exclude= [/core-js/]
// Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
config.module.rules[0].use[0].options.plugins.push(
require.resolve("babel-plugin-remove-graphql-queries")
)
config.resolve.mainFields=["browser", "module", "main"]
return config
},
}
// ./storybook/preview.js
import { action } from "@storybook/addon-actions"
// Gatsby's Link overrides:
// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
// so Gatsby Link doesn't throw errors.
global.___loader = {
enqueue: () => {},
hovering: () => {},
}
// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
global.__BASE_PATH__ = "/"
// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
// In Storybook, it makes more sense to log an action than doing an actual navigate. Check out the actions addon docs for more info: https://storybook.js.org/docs/react/essentials/actions
window.___navigate = pathname => {
action("NavigateTo:")(pathname)
}
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
// src/components/ExampleComponent.js
import React from 'react';
import PropTypes from 'prop-types'
export default function ExampleComponent({someProp, someOtherProp}) {
return (
<div>
<h1>I'm a example component with the following props and values</h1>
<p>someProp: {someProp}</p>
<p>someProp: {someOtherProp}</p>
</div>
)
}
ExampleComponent.propTypes= {
someProp:PropTypes.string,
someOtherProp:PropTypes.number
}// src/components/ExampleComponent.stories.js
import React from "react"
import ExampleComponent from "./ExampleComponent"
export default {
component: ExampleComponent,
title: "Components/ExampleComponent",
}
const Template = args => <ExampleComponent {...args} />
export const Default = Template.bind({})
Default.args = {
someProp: "Something",
someOtherProp:33,
};
All of this triage process was done on the following set up: Environment Info:
System:
OS: Windows 10 10.0.19042
CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)
npmPackages:
@storybook/addon-actions: ^6.4.9 => 6.4.9
@storybook/addon-essentials: ^6.4.9 => 6.4.9
@storybook/addon-links: ^6.4.9 => 6.4.9
@storybook/builder-webpack5: ^6.4.9 => 6.4.9
@storybook/manager-webpack5: ^6.4.9 => 6.4.9
@storybook/react: ^6.4.9 => 6.4.9Could you check on your end and see if the changes mentioned helped you solve your issue and follow up with us so that we can close this issue or continue to work on it until we find a suitable solution. Have a great day! Stay safe |
|
@jonniebigodes Thanks so much for hunting down a workaround!!! Might this be a better issue for |
|
@shilman no need to thank! And indeed you're correct. I've created an issue in the addon repository to address this one and mentioned the workaround so that it can be followed up ! With that @alfredoperez if you don't mind I'm closing this issue here, as it's already being tracked in the linked issue in the addon repository. If you wouldn't mind continuing the conversation there I'd appreciate it. Once again thanks for bringing this to our attention and I'm hoping this issue is fixed soon and you'll be able to use both tools without any additional issues. Have a great weekend. Stay safe |
|
Thanks @jonniebigodes I was going to give it a try this weekend to your manual setup in my personal repo. I don't mind not using the addon, but I want to use StoryBook with Gatsby. |
|
Thank you @jonniebigodes with this changes works perfectly
|
This section needs to be update - working `main.js` contents taken from storybookjs/storybook#17176 (comment) It is clear these docs need updating as the above issue was created on 12 Jan 2022. There has only been one commit to this file since then, which doesn't address the above issue. [commit](gatsbyjs@d3e0cd9). It appears the community plugin needs some work so until that time I would suggest removing that from the docs
- Update docs as per solution for issue: storybookjs/storybook#17176 (comment) - Community plugin https://storybook.js.org/addons/storybook-addon-gatsby is not up to date which is causing issues - removing this section The above mentioned issue was created on the 12 Jan and there has only been one commit to this file since then (gatsbyjs@d3e0cd9) which does not address this issue.
Describe the bug
StoryBook doesnt work with GatsbyJS
To Reproduce
-Run StoryBook and you will get the following console error:
System
Additional context
You can use the following repo to reproduce it https://github.com/alfredoperez/gatsby-storybook-error
The text was updated successfully, but these errors were encountered: