Skip to content

Commit cfbad02

Browse files
fix failing storybook build
1 parent fce3fb8 commit cfbad02

File tree

3 files changed

+48
-1
lines changed

3 files changed

+48
-1
lines changed

.storybook/main.js

+27
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const React = require('react');
2+
13
module.exports = {
24
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
35
addons: [
@@ -19,6 +21,31 @@ module.exports = {
1921
builder: 'webpack5',
2022
},
2123

24+
// This code was added from https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/
25+
// because doing import { navigate } from "gatsby" was causing some weird React.Fragment error
26+
// unclear if this slows down build times. If it does, maybe go to ProblemsListItemDropdown.tsx
27+
// remove the import navigate statement and get rid of this code.
28+
webpackFinal: async config => {
29+
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
30+
config.module.rules[0].exclude = [
31+
/node_modules\/(?!(gatsby|gatsby-script)\/)/,
32+
];
33+
// Use correct react-dom depending on React version.
34+
if (parseInt(React.version) <= 18) {
35+
// no clue why uncommenting this is needed to fix react is not defined in canvas
36+
// config.externals = ["react-dom/client"];
37+
}
38+
// Remove core-js to prevent issues with Storybook
39+
config.module.rules[0].exclude = [/core-js/];
40+
41+
// Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
42+
config.module.rules[0].use[0].options.plugins.push(
43+
require.resolve('babel-plugin-remove-graphql-queries')
44+
);
45+
config.resolve.mainFields = ['browser', 'module', 'main'];
46+
return config;
47+
},
48+
2249
// https://github.com/storybookjs/storybook/issues/12585
2350
// react docgen typescript plugin hampers hot reloading time, so we'll disable it in development
2451
...(process.env.NODE_ENV === 'development'

.storybook/preview.js

+20
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,26 @@ import { DarkModeContext } from '../src/context/DarkModeContext';
33
import '../src/styles/main.css';
44
import './storybook.css';
55

6+
import { action } from '@storybook/addon-actions';
7+
8+
// Gatsby's Link overrides:
9+
// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.
10+
// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op),
11+
// so Gatsby Link doesn't throw errors.
12+
global.___loader = {
13+
enqueue: () => {},
14+
hovering: () => {},
15+
};
16+
// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
17+
global.__BASE_PATH__ = '/';
18+
19+
// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method.
20+
// 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
21+
22+
window.___navigate = pathname => {
23+
action('NavigateTo:')(pathname);
24+
};
25+
626
export const parameters = {
727
actions: { argTypesRegex: '^on[A-Z].*' },
828
controls: {

postcss.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
22
plugins: [
33
require('postcss-import'),
4+
'tailwindcss/nesting',
45
require(`tailwindcss`),
5-
require('postcss-nested'),
66
require(`autoprefixer`),
77
...(process.env.NODE_ENV === `production` ? [require(`cssnano`)] : []),
88
],

0 commit comments

Comments
 (0)