Upgrading storybook from 6.3.7 to 6.4.22 shows spinner and no stories in react/typescript

Question

I have the project configured with CRA and I updating the packages to the following in package.json:

 "devDependencies": {
    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/node-logger": "^6.4.22",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/react": "^6.4.22",
    "@types/react-router-dom": "^5.1.8",
    "@types/react-test-renderer": "^17.0.1",
    "chromatic": "^6.5.4",
  },

and my main.tsx looks like this:

module.exports = {
  "stories": [
    "../src/**/introduction.stories.tsx",
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

But all I get is a spinner loading and no stories:

I didn't upgrade storybook the traditional way of npx sb upgrade I did it package by package for some reason, don't ask me why?

Any idea's anyone?

Any idea's? no errors in console either.

Answer 1

It turns out don't upgrade the packages individually, the best thing to do is:

npx sb@latest upgrade

once I did this, after reverting to a previous commit, It all worked as expected.