Using React Storybook with Gatsby #633
Comments
|
I haven't used React Storybook much but love the idea. Would love it if there was an easy way to get it working with Gatsby components. React Storybook would be just as useful with Gatsby sites as any other React app. Gatsby's webpack config is at https://github.com/gatsbyjs/gatsby/blob/master/lib/utils/webpack.config.js — it's pretty vanilla Webpack config for the most part — have you had a chance to look through the config file? If it's hard to trace what's going on, you can console.log at the end the final config. |
|
I've invested some time into getting React Storybook working with Gatsby -- i'll paste the gist of it in here, but keen to understand if there's a desire to merge something in to this repo as an example or readme update? For anyone else that attempts this, the crux of it is to create a custom react storybook webpack config that uses all of gatsby's config, except the entry and output, which it uses from the react storybook config. The tricky part was the way you were creating the webpack config and the .storybook/wepack.config.js You'll also need stories and a react storybook config file, our stories live inside the component directories, and are named to match the .storybook/config.js |
|
@tonymilne, I'm also interested in an idea of Gatsby and Storybook integration! |
|
@tonymilne this looks fantastic! This could be a really good fit for some upcoming client work of mine. Agree with @usulpro — this would be a good fit to put in a separate repo (and publish to NPM). Then you could just run |
|
Using the provided config it works great in develop. But after adding some components with css modules, when I run gatsby build, I get a postcss error: If I remove storybook from node_modules, this error goes away. I'm not sure if I need to make changes to the storybook webpack config or if this error is caused from something else. |
|
After trying a bunch of things the following worked for me. Add postcss.config.js to root containing: module.exports = {}; Wish I understood why this is. |
|
FYI I've just updated the Storybooks docs site to use Gatsby. So it's both an example site for gatsby and also an example of using Storybook within a Gatsby site. cc @KyleAMathews https://storybooks.js.org It's kind of a weird setup because it used to be a CRA app and I wanted to preserve as much of the original structure as I could, but it seems to be working well. Here's the PR for anybody who is interested in the changes: |
|
@shilman it's strange, but the docs reload the whole page on every path change |
|
@shilman yeah perhaps you're not using the react-router |
|
Thanks @g8tguy @KyleAMathews just saw this and have fixed it now storybook-eol/storybooks.github.io#41. Thanks for your help! 🙏 |
|
@usulpro do you think we could add @tonymilne 's solution to |
|
@shilman that would be cool! |
|
@shilman It's a great idea! The more project we can support the better! |
|
just tried @tonymilne's solution however with no luck, receiving this following error in console: seeing that it might have something to do with the function being async, I attempted: const config = gatsbyWebpack(program, directory, suppliedStage).then(config => {
return config.resolve();
}).catch(e => {
console.log(e);
});this subsequently spat out another error: does anyone know what I might be doing wrong/have encountered a similar problem? could this have something to do with |
|
Hello here, Did somebody achieve it to work? Any repo that can be used as an example? |
|
Hello, if you want an example of working configuration with storybook, you can have a look on my starter (it’s in typescript but it must be quite same with pure javascript) https://github.com/fabien0102/gatsby-starter I have just stub all gatsby link ;) |
|
Thanks @fabien0102, got it working 🙂 In case somebody is interested in the code/steps, I added them below:
6 .Code away 💯 |
|
Here's an example configuration using Gatsby with Storybook and CSS Modules: https://github.com/m-allanson/gatsby-storybook-css-modules Storybook is configured to match Gatsby's default setup where filenames ending with |
|
Given @m-allanson's starter — closing this out. Please open more issues if there's something we can do to improve how Gatsby works with Storybook! |
|
Hi guys, I got storybook to work, when I run yarn run storybook, I get storybook on port 9001, however, whenever I create a file MyModule.stories.js, I get this error: Here's the content of my config.js file in .storybook import { configure } from "@storybook/react";
import { setOptions } from "@storybook/addon-options";
setOptions({
name: 'My website',
downPanelInRight: true
});
// Stories loader
const req = require.context("../src", true, /.stories.[jt]sx?$/);
function loadStories() {
req.keys().forEach(req);
}
// Initialize react-storybook
configure(loadStories, module);and the content of my file webpack.config.js const path = require("path");
const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js");
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);
// Add markdown loader
config.module.rules.push({
test: /\.md$/,
include: path.resolve(__dirname, "../src"),
loader: require.resolve("raw-loader")
});
config.resolve.extensions.push(".md");
return config;
};Do you have any idea why I'm getting this error? Thank you |
|
@alveshelio Do you have Note: I reformat your message with |
fk
added
the
type: question or discussion
|
When I attempt to run @aperkaz 's steps, and I run Any ideas what I'm missing? |
|
While I haven't nailed down exactly what was going wrong, the above error seemed to be related to the versino of either |
|
I was also experiencing the Attempted using Attempted updating Decided to move my Storybook into a subfolder with its own "@storybook/addon-info": "3.4.8",
"@storybook/react": "3.4.8", |
|
@larrybotha I have the same error, I think we need to wait until v2 is released to works with storybook properly 😢 |
|
@Kikobeats has anyone from gatsby said this issue will be resolved in v2? |
|
I'm running into a slightly different error with Gatsby v2 and a config based on the one aperkaz & m-allanson shared above. So far I've been able to limit it to components that import Gatsby. It looks like it's not compling the jsx and I'm hopeful I can get something working with babel-loader. TBD I'm also happy to make a new issue to track storybook with v2 if that's more appropriate |
|
I got it working by adding |
|
I followed @aperkaz instructions, but as soon as I installed Installing [email protected] fixed the error and then could build both the app and storybook fine. The only other issue I had was with Gatsby's Link component, but this can be fixed by wrapping the story in a |
|
I also received the |
|
For anyone else using @tonymilne 's fantastic code above, and encountering the following error message: I fixed the issue by noticing that Tony had used the name |
|
In case anyone is still struggling with this problem, folks at Gatsby seem to have provided a solid solution in their documentation here: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/ I just used the solution presented above, and it worked perfectly. 💯 |
|
Sorry if this is the wrong spot. I'm still getting an error when using ERROR in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js 16:2
Module parse failed: Unexpected token (16:2)
You may need an appropriate loader to handle this file type.
|
| const StaticQuery = props => (
> <StaticQueryContext.Consumer>
| {staticQueryData => {
| if (.stroybook/webpack.config.js module.exports = (baseConfig, env, defaultConfig) => {
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
defaultConfig.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
defaultConfig.module.rules[0].use[0].loader = require.resolve('babel-loader');
// use @babel/preset-react for JSX and env (instead of staged presets)
defaultConfig.module.rules[0].use[0].options.presets = [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-env')];
// use @babel/plugin-proposal-class-properties for class arrow functions
defaultConfig.module.rules[0].use[0].options.plugins = [require.resolve('@babel/plugin-proposal-class-properties')];
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
defaultConfig.resolve.mainFields = ['browser', 'module', 'main'];
defaultConfig.module.rules.push({
test: /gatsby\/cache-dir.*\.js$/,
loader: require.resolve('babel-loader'),
});
defaultConfig.resolve.extensions.push('.ts', '.tsx');
defaultConfig.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('awesome-typescript-loader'),
exclude: [/node_modules\/(?!(gatsby)\/)/],
});
return defaultConfig;
};I get a transpiling error when I downgrade to babel@7 (as above) ERROR in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'code' of null
at transpileIs anyone else experiencing this issue? |
|
@zacharymctague I got around that by using a conditional that requires (or not) Gatsby's Something like: You can set the environment in your package.json script, e.g. |
|
@zacharymctague I don't remember where I got it from but that's how I did it: @msachi's approach looks nice though. |
|
I followed the configuration advice in the documentation but am still seeing the issue that @zacharymctague reported; even with telling |
|
@alexlafroscia config.module.rules.unshift({
test: /\.js$/,
use: [{
loader: require.resolve('babel-loader'),
options: {
presets: ["react-app"],
}
}],
include: [
path.join(path.dirname(__dirname), 'node_modules/gatsby/cache-dir')
]
}); |
|
After trying various fixes from here, (none worked). This one did! https://github.com/PaulieScanlon/gatsby-recipe-storybook-js/blob/master/recipe/main.js |
and others
I tried setting up https://github.com/storybooks/react-storybook in my gatsby project, but i quickly felt blocked because i needed a webpack config that gatsby is using to resolve my components/imports that would work for react storybook.
Do you have any recommendations on how to use react storybook with gatsby?
The text was updated successfully, but these errors were encountered: