Has anybody successfully integrated storybook docs with gatsby? - reactjs

Question

In my Gatsby themes project, I am trying to integrate the storybook using .mdx format.
But the webpack of storybook is not able to convert the .mdx files.
It keeps throwing different errors.
I have tried using with storybook presets and without presets, but there was no solution.
Card Component
import React from 'react';
const Card = () => {
return (
<div className="laptopUp:max-w-lg max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div className="sm:flex sm:items-center px-6 py-4">
<img
className="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"
src="https://randomuser.me/api/portraits/women/17.jpg"
alt="Woman's Face"
/>
<div className="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
<p className="text-xl leading-tight">Erin Lindford</p>
<p className="text-sm leading-tight text-gray-600">
Customer Support Specialst
</p>
<div className="mt-4">
<button className="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">
Message
</button>
</div>
</div>
</div>
</div>
);
};
export {Card};
Card Story:
import { Meta, Story, Preview } from '#storybook/addon-docs/blocks';
import {Card} from './card.js';
<Meta title="MDX|Card" component={Card} />
With `MDX` we can define a story for `Card` right in the middle of our
markdown documentation.
<Preview>
<Story name="Demo Card">
<Card />
</Story>
</Preview>
.storybook/config.js
import { configure, addParameters } from '#storybook/react';
import { DocsPage, DocsContainer } from '#storybook/addon-docs/blocks';
import { action } from '#storybook/addon-actions';
import '../main.css';
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
prepareForInline: (storyFn) => storyFn(),
},
});
// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
enqueue: () => {},
hovering: () => {}
};
// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = '';
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
action('NavigateTo:')(pathname);
};
configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module);
My webpack config:
// module.exports = ({ config, mode }) => {
// // Transpile Gatsby module because Gastby includes un-transpiled ES6 code.
// config.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)
// config.module.rules[0].use[0].loader = require.resolve('babel-loader')
// // The next two lines should always reflect the config in jest-preprocess.js until there is a way for Gatsby to expose an internal webpack.config
// // 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'),
// ]
// // use #babel/plugin-proposal-class-properties for class arrow functions
// config.module.rules[0].use[0].options.plugins = [
// require.resolve('#babel/plugin-proposal-class-properties'),
// ]
// // https://github.com/gatsbyjs/gatsby/issues/10662:
// // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
// config.resolve.mainFields = ["browser", "module", "main"]
// return config
// }
/* eslint-disable no-param-reassign */
const path = require('path')
const webpack = require('webpack')
const createCompiler = require('#storybook/addon-docs/mdx-compiler-plugin');
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
const isProduction = mode
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.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)
config.module.rules[0].use[0].loader = require.resolve('babel-loader')
// 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')
]
// use #babel/plugin-proposal-class-properties for class arrow functions
config.module.rules[0].use[0].options.plugins = [
require.resolve('#babel/plugin-proposal-class-properties'),
require.resolve('babel-plugin-remove-graphql-queries')
]
config.module.rules = config.module.rules.filter(
f => f.test.toString() !== '/\\.css$/'
)
config.module.rules.push(
{
test: /\.(ttf|woff|woff2|eot|svg)$/,
use: 'file-loader?name=[name].[ext]',
exclude: /\.inline.svg$/
},
{
test: /\.(jpg|png|jpeg|jpg)$/,
loader: 'file-loader',
include: path.resolve(__dirname, '../static/')
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
localIdentName: 'mod-[hash:base64:8]'
}
},
'postcss-loader'
],
include: path.resolve(__dirname, '../')
},
{
test: /\.story\.mdx$/,
exclude: [/node_modules/],
include: [
path.resolve(__dirname, '../src'),
],
use: [
{
loader: 'babel-loader',
options: {
plugins: ['#babel/plugin-transform-react-jsx']
}
},
{
loader: '#mdx-js/loader',
options: {
compilers: [createCompiler({})]
}
}
],
},
{
test: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[local]-[hash:base64:5]'
}
},
'postcss-loader'
],
include: path.resolve(__dirname, '../src')
}
)
config.plugins.push(
new webpack.DefinePlugin({
STORYBOOK: JSON.stringify(true),
PRODUCTION: JSON.stringify(isProduction)
})
)
config.resolve.alias['#'] = path.resolve(__dirname, '../src/')
config.resolve.mainFields = ['browser', 'module', 'main']
return config
}
I expect to be able to see the props and mdx stor has a normal story.
Instead getting various errors.
https://user-images.githubusercontent.com/43405939/66821716-83e17300-ef60-11e9-8a89-fc99591954aa.png
Github Issue: https://github.com/storybookjs/storybook/issues/8414
Github repo to reproduce: https://github.com/vinayg-cp/storybook-poc.git