storybook: In v6.1.6 storybook react no longer loads. It generates a bad bundle name

I tried all of the suggestion above, didn’t work. Then flushing the browser cache fixed it for me… Wow.

Can you try running with --no-manager-cache?

Okay I just tried upgrading my project to 6.1.9. Starting up storybook gave the same issue as before - a malformed bundle name (or at least a different bundle hash to the one the system is looking for). Starting it up again however with --no-manager-cache fixes the problem.

Once it works then dropping the --no-manager-cache again works fine, but I’ll need to leave it in there for now as other members of the team will also hit the same issue and I’d rather the update just worked invisibly.

EDIT: Clearing my browser cache solved the issue. Not sure why, but it seems like storybook doesn’t look at the new main.[hash].bunder.js file when the hash changes.

---

I’m encountering this issue in a way that doesn’t seem to be related to upgrading storybook. After running npm run storybook (with and without --no-manager-cache flag), I get a blank page with this logged to the console:

main.600d6c919d9f368542ae.manager.bundle.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Storybook stuff from package.json (this has not changed):

"scripts: { ... "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }

"devDependencies": { "@storybook/addon-actions": "^6.1.14", "@storybook/addon-essentials": "^6.1.14", "@storybook/addon-links": "^6.1.14", "@storybook/react": "^6.1.14",

main.js: module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], };

preview.js: import MyTheme from '@myTheme'; import { ThemeProvider } from '@material-ui/core/styles'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, }; export const decorators = [ (Story) => ( <ThemeProvider theme={MyTheme}> <Story /> </ThemeProvider> ), ];

Another piece of the puzzle is that, if I run npm install in a feature branch that does not have this issue and then switch over to the problem feature branch without running npm install, storybook runs fine, even though the package.json files are identical. I hit the bug only after running npm install, so it feels like there is some weirdness related to that process. I have already tried deleting node_modules, which did not help.

Just tried again with v6.1.7.

• I removed the node_modules/.cache folder.
• confirming my package scripts as follows

    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"

running npm run storybook

It builds okay

webpack built 6c4d9ade43c0dc5108cd in 12596ms
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.1.7 started                          │
│   14 s for preview                                 │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.20.23:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯

but in the browser I just get a blank page.

In the console I see:

Failed to load resource: the server responded with a status of 404 (Not Found)
main.85fc4cce5689ec0a5f0b.bundle.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
vendors~main.e7564fc28a4422efd6b6.bundle.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
main.85fc4cce5689ec0a5f0b.bundle.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

The bundle hash is not the same as any of the hashes that the page attempts to load.

.storybook/main.js

const path = require('path')

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src")
    ]

    return config
  }
}

.storybook/preview.js

import redux from './redux.decorator'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" }
}

export const decorators = [redux]

npm run storybook full output

> start-storybook -p 6006 -s public

info @storybook/react v6.1.7
info 
info => Loading static files from /Users/davesag/src/[redacted]/public and serving at /.
info => Using prebuilt manager
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup
webpack built 6c4d9ade43c0dc5108cd in 12596ms
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.1.7 started                          │
│   14 s for preview                                 │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.20.23:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯

Running now on 6.3.12 on a fresh install (NextJS, TS, Tailwind, Storybook), but doesn’t work. Also non of the workarounds mentioned in this thread unfortunately.

No errors in the terminal

╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 6.3.12 started                        │
│   5.14 s for manager and 5.08 s for preview       │
│                                                   │
│    Local:            http://localhost:6006/       │
│    On your network:  http://192.168.1.18:6006/    │
│                                                   │
╰───────────────────────────────────────────────────╯

some in the console;

DevTools failed to load source map: Could not load content for http://localhost:6006/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
vendors~main.manager.bundle.js:107059 [Violation] 'setTimeout' handler took 53ms
DevTools failed to load source map: Could not load content for http://localhost:6006/react-popper-tooltip.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Same for 6.4.13. Clearing cache does not help.

Same issues for me sadly 😕

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.44 containing PR #14993 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

Okay I just tried upgrading my project to 6.1.9. Starting up storybook gave the same issue as before - a malformed bundle name (or at least a different bundle hash to the one the system is looking for). Starting it up again however with --no-manager-cache fixes the problem.

Once it works then dropping the --no-manager-cache again works fine, but I’ll need to leave it in there for now as other members of the team will also hit the same issue and I’d rather the update just worked invisibly.

Just hit this on an upgrade to 6.1.18 and this did the trick for me as well.

@fllprbt Did you trash node_modules and try again? Please create a new ticket for 6.4.13 and elaborate on your exact problem if this is indeed a regression. The issue at hand is closed.

I just want to add that @davesag tip worked for me. After I had did the npx upgrade as suggeted, my storybook dev server was looking for a main.xxx.js bundle that wasn’t there. (404) - Once u ran storybook with the suggested tag I was able to get my SB back.

@ghengeveld I can confirm that fixes the issue 🙏 Thanks again

Same issue after upgrading. My package.json looks like:

"storybook": "start-storybook -p 6006 --no-dll",
"build-storybook": "build-storybook --no-dll"

Reverting to 6.1.5 fixes the issue.