Safari does not show all stories

[michaelaflores]

Describe the bug
When viewing our Storybook in Safari, various stories are missing from the sidebar. The missing stories are revealed when viewing our Storybook in Chrome.

To Reproduce
Steps to reproduce the behavior:

1. Open Storybook on Safari and Chrome

Expected behavior
Stories show up in the sidebar identically across major browsers.

Screenshots
Safari on left, Chrome on right.

Code snippets
N/A

System
System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Binaries:
Node: 12.16.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Browsers:
Chrome: 86.0.4240.80
Firefox: 76.0.1
Safari: 14.0
npmPackages:
@storybook/addon-a11y: ^6.0.21 => 6.0.21
@storybook/addon-actions: ^6.0.20 => 6.0.20
@storybook/addon-docs: ^6.0.20 => 6.0.20
@storybook/addon-essentials: ^6.0.20 => 6.0.20
@storybook/addon-knobs: ^6.0.21 => 6.0.21
@storybook/addon-links: ^6.0.20 => 6.0.20
@storybook/node-logger: ^6.0.20 => 6.0.20
@storybook/preset-create-react-app: ^3.1.4 => 3.1.4
@storybook/preset-typescript: ^3.0.0 => 3.0.0
@storybook/react: ^6.0.20 => 6.0.20

Additional context
N/A

[michaelaflores]

In case this is relevant, my main.js contains:

const path = require('path')
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-knobs",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.svg$/,
      loader: "svg-url-loader",
    });
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "ts-loader",
        options: {
          compiler: 'ttypescript',
        }
      }
    });
    // config.plugins.push(new TSDocgenPlugin()); // removing, as it adds minutes to build time, perhaps can be added for production builds if needed
    config.resolve.extensions.push('.ts', '.tsx');
    return config
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

[shilman]

Are there any errors in the browser console?

[michaelaflores]

@shilman there are a few, only these:

[shilman]

@michaelaflores those unexpected errors are why, and have something to do with your components. AFAICT it's unrelated to storybook

[michaelaflores]

@shilman is my expectation that a Storybook component can throw an error and Storybook will still be able to show unrelated stories incorrect?

[shilman]

@michaelaflores rendering errors absolutely. loading errors apparently not. we load stories by using webpack require, and apparently that's not resilient to errors.

[stale]

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!