Navigation broken after adding showRoots option

geoctrl commented 4 years ago

Describe the bug First time loading the site doesn't show showRoots group titles. Refreshing the page after first load shows the group titles but now navigation doesn't work.

This is only a problem here storybook.canopytax.com. Running this locally works.

To Reproduce Steps to reproduce the behavior:

Go to storybook.canopytax.com
Notice showRoots groups are not there, but navigation works
Refresh page
showRoots group titles are now there
try clicking on other stories - navigation doesn't work - requires a page refresh to load correct page

Expected behavior

I expect the showRoots group titles to show on first load
I expect navigation to work

Code snippets

addParameters({
  options: {
    showRoots: true,
  },
});

System:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
    Yarn: 1.22.0 - ~/.nvm/versions/node/v12.16.0/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v12.16.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 74.0
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-docs: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-knobs: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-links: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-notes: ^5.3.19 => 5.3.19 
    @storybook/addon-storysource: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addons: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/cli: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/preset-scss: ^1.0.2 => 1.0.2 
    @storybook/react: ^6.0.0-beta.38 => 6.0.0-beta.38

Additional context

Running it locally works
sometimes stories don't render
sometimes the docs tab doesn't render

shilman commented 4 years ago

A few things. @storybook/addon-notes is deprecated in 6.0 so you should probably remove it. Also, are you sure this is related to showRoots? The roots in your example storybook look fine to me, but the navigation is broken. I haven't seen this before, so I suspect it is something specific to your storybook.

geoctrl commented 4 years ago

yeah, you're right - I removed the changes I made and navigation is still not working... here's a list of changes I made:

removed showRoots prop
removed all hierarchy in titles
removed @storybook/addon-notes (we tested this out earlier and forgot to remove the dep)

I think it's also important to note that navigation was working before we messed with showRoots and hierarchy titles

Since I'm not sure how to proceed, I'm just going to post everything in our .storybook directory:

main.js

const path = require('path')
const goat = require('../webpack.config.goat')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const IcosetWebpackPlugin = require('@icoset/icoset-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  stories: ['../src/**/*.stories.js', '../src/**/*.story.js'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-storysource',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-knobs/register',
  ],
  webpackFinal: async config => {
    // do mutation to the config
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.resolve.alias['canopy-styleguide'] = path.resolve(__dirname, '../src/canopy-styleguide.js')

    config.module = goat.module
    // show the source of a story
    config.module.rules.push({
      test: /\.(stories|story)\.js$/,
      loaders: [require.resolve('@storybook/source-loader')],
      enforce: 'pre',
    })
    config.plugins = [
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
      new webpack.DefinePlugin({
        DOCUMENTATION_WEBSITE: true,
      }),
      new IcosetWebpackPlugin({
        iconMap: true,
        entryName: 'styleguide-documentation',
        directory: path.resolve(__dirname, '../icons'),
        deepFind: true,
      }),
      ...config.plugins,
    ]
    return config;
  },
};

preview.js

import React from 'react'
import { addDecorator, addParameters } from '@storybook/react'
import { addons } from '@storybook/addons';

import './styles/main.less';
import theme from './theme';

const fira = document.createElement('link');
fira.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
fira.setAttribute('rel', 'stylesheet');
document.head.appendChild(fira);

addDecorator(storyFn => <div className="root">{storyFn()}</div>);

addons.setConfig({
  theme,
});

addParameters({
  options: {
    storySort: (a, b) => {
      return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
    },
  },
});

manager.js

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme,
});

theme.js

import { create } from '@storybook/theming/create';

export default create({
  base: 'light',
  fontBase: '"Inter", sans-serif',
  brandTitle: 'Canopy Styleguide',
  brandUrl: 'https://www.getcanopy.com/',
});

updated info

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
    Yarn: 1.22.0 - ~/.nvm/versions/node/v12.16.0/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v12.16.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 74.0
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-docs: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-knobs: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-links: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addon-storysource: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/addons: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/cli: ^6.0.0-beta.38 => 6.0.0-beta.38 
    @storybook/preset-scss: ^1.0.2 => 1.0.2 
    @storybook/react: ^6.0.0-beta.38 => 6.0.0-beta.38

stale[bot] commented 4 years ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] commented 4 years ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

geoctrl commented 4 years ago

reverting back to 5.3.19 fixed the issue (version disparity somewhere?)

then we followed the migration instructions to update to v6 and there's still no issue 🤷‍♀️

alexchantastic commented 3 years ago

I ran into a similar issue today on 6.2.8. My initial setup had showRoots: false which worked fine. Later on, I decided that I actually wanted to show top level headings. I removed the line and restarted Storybook, but the root headings still didn't show up. I re-added the line but set it to true instead and restarted Storybook -- still no headings.

I dug around and discovered the --no-manager-cache flag. I restarted Storybook with this flag and they finally showed up 🎉 ! Removing the showRoots line also worked and I was able to launch Storybook without the flag later on.

storybookjs / storybook