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

[davesag]

Describe the bug

In v6.1.6 storybook react builds but no longer loads in the browser. It generates a bad bundle name

Reverting back to 6.1.4 fixes the problem

To Reproduce

Upgrade a React project that is working under Storybook 6.1.4 and run storybook and you get a blank browser page.

In the console it says

HTTP error: status code 404 could not load http://localhost:6006/xxxblah.bundle.js

Expected behaviour

I expected the storybook to load

System

Environment Info:

System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
Browsers:
Chrome: 87.0.4280.67
Safari: 14.0.1
npmPackages:
@storybook/addon-actions: ^6.1.6 => 6.1.6
@storybook/addon-essentials: ^6.1.6 => 6.1.6
@storybook/addon-links: ^6.1.6 => 6.1.6
@storybook/node-logger: ^6.1.6 => 6.1.6
@storybook/preset-create-react-app: ^3.1.5 => 3.1.5
@storybook/react: ^6.1.6 => 6.1.6

[shilman]

Do you have a repro repo you can share? Unable to reproduce.

Or if not a full repro, what does this part of your package.json look like?

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

[monkeyinsurgency]

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.

[davesag]

Do you have a repro repo you can share? Unable to reproduce.

Or if not a full repro, what does this part of your package.json look like?

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

It looks exactly like that. Sorry not a public repo. I was able to remove the —no-dll bit when upgrading to 6.1.4 which works fine.

[ghengeveld]

Can someone with this error please share the following:

• Storybook's main.js config
• Storybook's preview.js config
• The start-storybook CLI output

I have upgraded our shapes demo repository to 6.1.4, then to 6.1.6 without any problem. I did notice however, that the cached manager is not busted when upgrading Storybook, which would lead to the preview and manager to be different versions of Storybook. I've opened an issue for that: https://github.com/storybookjs/storybook/issues/13291

To make sure this issue is unrelated to manager caching, please delete node_modules/.cache before starting Storybook.

[shilman]

@ghengeveld to me this looks like a bug with the static route change?!

[ghengeveld]

You mean the -s public?

[shilman]

Your PR in that release changed the code related to the static directory handling, and now a static file is serving incorrectly.

[ghengeveld]

That seems likely, but so far I can't reproduce.

[davesag]

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/    │
│                                                    │
╰────────────────────────────────────────────────────╯

[shilman]

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

[jpcmf]

Anybody can help me with this issue?

https://github.com/storybookjs/storybook/issues/13255

[jpcmf]

How to downgrade? Only manually?

[davesag]

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

I'll try this later today and report back. Also I see SB is now up to 6.1.9 so will try that too.

[davesag]

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.

[kiily]

I am getting a slightly different error but seems to be related to upgrading. I recently used the auto-upgrade with npx to bump our storybook from 6.0.21 to 6.1.9 and I am getting errors all over the place when I check out one of my stories. Could this be related to the above? I tried the --no-manager-cache to no avail :/

I can confirm that the same issue is on version 6.1.4

[ghengeveld]

@kiily Looks like you've misconfigured addon-backgrounds. It takes an array of values. Most likely you've given it a string, object or null somewhere. undefined would be fine because it defaults to an empty array. Check the docs for details.

This is unrelated to the issue at hand, so if you can't work it out, please open a separate bug report.

[kiily]

Hi @ghengeveld, reverting actually gave me a helpful warning and pointed me in that direction too. I think it's just configured with the old API and hence the error. I will test and report back, will open a new issue if necessary but feels like that should do the trick.

Thanks for the quick reply, keep smashing it guys. Amazing job all around 🎉

[kiily]

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