Storybook only loads stories when I make changes

Question

Storybook only loads stories when I make changes. So when I yarn start my storybook it shows up with:

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config. Try reloading the page. If the problem persists, check the browser console, or the terminal you've run Storybook from.

When I make a change in one of the *.stories.jsx files it shows all the stories suddenly. I am coming over from storybook in 2015 where everything was previously added as StoriesOf().

The inspection tools in chrome showed:

index.js:49 Unexpected error while loading ./broadcast.stories.jsx: TypeError: Cannot read properties of undefined (reading 'extend')

I am really confused about what type of error this even is. As I said the stories appear once you make any change at all even a space or delete a space somewhere or change a letter and the stories load up.

In side the main.js file I have tried changing: stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx)'], into all sorts of suggestions I found on the internet.

const path = require("path");
const resolve = uri => path.resolve(__dirname, uri);

module.exports = {
    stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-docs', '@storybook/addon-knobs', '@storybook/addon-actions', '@storybook/addon-viewport'],
    rules: [{
                test: /\.(scss|sass)$/,
                loaders: ["style-loader", "css-loader", "sass-loader"],
                include: path.resolve(__dirname, "../")
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader?name=fonts/[name].[ext]',
                include: path.resolve(__dirname, "../src/fonts")
            },
            {
                test: /\.(jpg|png|svg)$/,
                loader: 'url-loader',
                options: {
                limit: 25000,
                }
            },
        ],
    watch: true,
    resolve: {
        alias: {
            i18n: resolve('../src/i18n'),
        },
        extensions: ['.js', '.jsx'],
        modules: ['node_modules'],
  }
}

An example of a story:

export default {
  title: 'ScalableWrapper',
  component: ScalableWrapper,
  decorators: [],
  parameters: {},
}

export const Background = () => <ScalableWrapper style={{ overflow: 'scroll' }}>
  <AnimatedBackground
    disableAnimationBG={boolean("Disable Animation", false)}
    background={text("Background", backgroundImage)}
    brushPattern={repeatableBrush}
  /></ScalableWrapper>

Package.JSON:

"devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-knobs": "^6.3.1",
    "@storybook/addon-viewport": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.3.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^1.13.3",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "babel-plugin-transform-react-stateless-component-name": "^1.1.2",
    "chai": "^4.3.4",
    "css-loader": "^6.5.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "jest": "^27.3.1",
    "jest-enzyme": "^7.1.2",
    "node-sass": "^6.0.1",
    "postcss-loader": "^6.2.0",
    "react-test-renderer": "^17.0.2",
    "sass-loader": "^12.3.0",
    "storybook-addon-specifications": "^2.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.61.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-dev-middleware": "^5.2.1",
    "webpack-dev-server": "^4.4.0"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.16.0",
    "chart.js": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-click-outside": "^3.0.1",
    "react-dom": "^17.0.2",
    "react-pose": "^4.0.10",
    "react-spring": "^9.3.0",
    "react-textfit": "^1.1.1",
    "styled-components": "^5.3.3",
    "styled-tools": "^1.7.2"
  },

Answer 1

"chart.js": "^3.6.0",

Chart JS, when it has an error, instead of throwing an error message, sometimes it just silently breaks.

I guess storybook had no handle for this odd case and loaded nothing without an error in the console. Which is fine because storybook was not the one with the error, this seems like Chart's fault.