I would like to preface this post by saying that I not too experienced with frontend tech.
For some brief context, I am trying to configure Storybook with a NextJS project which uses styles from custom CSS and Bootstrap. The Bootstrap libraries are configured to be pulled from a CDN on the client side. This has been configured in the src/pages/_document.tsx file. This works fine in dev/production. Apparently we are using two version of Bootstrap (5.2 and 4.0.0). The team that worked on this app before me left this (Hopefully this is not causing the problem).
Now with the context out of the way, the problem comes in when I initialize Storybook. The default config only appears to be rendering the custom (non-bootstrap) css. I can see in the Firefox dev tools network tab that there are no calls to the CDNs when a story is rendered. I read that this can be solved by creating a .storybook/preview-head.html file and putting the links/scripts from _document.tsx into there. So I did this, restarted storybook, and was faced with empty components on Storybook that will not render in. However, I can see that in the network tab that there are successful requests being made to the CDN. I also read that a similar effect can be achieved by creating manager-head.html but this just makes Storybook render with a blank white screen. Any help or insight would be greatly appreciated!
Tech stack:
- Next 13.1.1
- Typescript 4.4.4
- Storybook 7.0.6
- @storybook/addon-styling 1.0.1
- @storybook/testing-library: 0.0.14-next.2
- Bootstrap 5.2 and 4.0.0 via config in _document.tsx:
- 5.2:
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx' crossOrigin='anonymous' /> <script defer src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js' integrity='sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa' crossOrigin='anonymous' />- 4.0.0
<script defer src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossOrigin='anonymous' /> <script defer src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossOrigin='anonymous' /> <script defer src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossOrigin='anonymous' />
/.storybook/preview.ts:
import type { Preview } from '@storybook/react'
import '../src/styles/globals.css'
import React from 'react'
// This Block fixes rendering images that use the NextImage tag in Storybook
import * as NextImage from 'next/image';
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, 'default', {
configurable: true,
value: (props) =>
React.createElement(OriginalNextImage, { ...props, unoptimized: true }),
})
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};
export default preview
/.storybook/main.ts:
import type { StorybookConfig } from '@storybook/nextjs'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-styling',
],
framework: {
name: '@storybook/nextjs',
options: {},
},
docs: {
autodocs: 'tag',
},
};
export default config
Here is an example of the css render issue:
What storybook renders:
What I expect storybook to render:
