Storybook only loads stories when I make changes

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"
  },