I've just upgraded storybook v6 -> v7 (alongside nextjs and react major version upgrades). My stories all render as expected, but when I switch between stories I have to refresh the page to load the component. The console logs an error:
TypeError: Cannot read properties of null (reading 'setAttribute')
Which is coming from sb-preview runtime.js (this.docsRoot().setAttribute("hidden", "true"),
, where docsRoot is trying to find an element with id "storybook-docs"
.
I'm running storybook 7.6.4 (with storybook/addon-docs and storybook-react configured among other addons).
This is my main.ts
:
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-docs",
{
name: '@storybook/addon-styling-webpack',
options: {
rules: [
// Replaces existing CSS rules to support PostCSS
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
// Gets options from `postcss.config.js` in your project root
loader: 'postcss-loader',
options: { implementation: require.resolve('postcss') }
}
],
}
]
}
}
],
framework: {
name: "@storybook/nextjs",
options: {}
},
}
I'm not sure where to start in debugging this, anyone seen a similar issue?