Storybook 7: switching stories fails due to missing "storybook-docs" element

77 views Asked by At

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?

0

There are 0 answers