Storybook build success but error when serving

Question

I have encountered a problem when serving a built storybook. As you can see below, it shows only a spinner spinning into oblivion. When i opened the console, it says: Error: manager received sharedStateChanged-manager-storybook/viewport but was unable to determine the source of the event

Here's my storybook configuration files:

main.js

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: config => {
    return {
      ...config,
      plugins: config.plugins.filter(plugin => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  }
}

preview.js

import '../src/recore/.storybook/preview.css'
import * as Recore from '../src/recore'

Recore.init({
  defaults: {
    IMAGE_RESOLVER: path => {
      return import('../src/assets/' + path)
    }
  }
})

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

To build the storybook, i run build-storybook -o ./build -s ./public -c .storybook I am using npm, and it told me to do npm run build-storybook -- -o ... but it doesn't behave as expected. Also, I currently use "@storybook/react": "^6.1.21"

Has anyone encountered this problem before? Can you help me to fix it? Many thanks before!

Luane

Answer 1

add "@storybook/builder-webpack5": "^6.2.9",

https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

Jewess

This didn't seem to fix the error for me. Any other ideas? – Karee

Answer 2

When I had this problem I was starting the static file serving with npx serve -s.

Changing the startup to npx serve fixed the problem (this was hosting on a Linux web app in Azure).

Socratic

Answer 3

If you are trying to deploy it to Amplify you need to rewrite some rules: (top to bottom)

1st rule: Source: /iframe.html Target: /iframe.html

2nd rule: Source: /<*> Target: /index.html

3rd rule: Source: </^[^.]+$|\.(?!(css|xml|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> Target: /index.html

Be aware that the 1st rule the target is to iframe.html

Tend

Answer 4

Are you trying to deploy it to amplify?

Fatigued

Nope, i was trying to deploy it into GCP – Luane

@Gabriel Mičko, I'm having this issue on amplify. Any idea how to mitigate? – Oocyte

@Oocyte I think it was a server configuration problem that amplify did not serve some .html file. If I remember correctly I fixed it by enabling html to be served, not just index.html. If that doesn't help lmk I can take a look. – Panicle

Yes, amplify adds some rewrite/redirect rules that need to be deleted first. This is why it has the same repro as @Bazza's answer. – Oocyte

Hi @GabrielMičko I am facing the same error.. I added all of the above, but this amplify still won't show storybook on my FE. Any chance to chat in private and try to fix this? – Fantastically

In my case it was problem with iframe.html being blocked as well. The suggestion above should work. If it doesn’t you can DM me on Twitter. @MilošMilutinov – Panicle

Answer 5

I only needed 1 rule in my Amplify config to get storybook to work

Note the below is from terraform, but you should be able to grok it's meaning:

  custom_rule {
    source = "</^[^.]+$|\.(?!(html|css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>"
    status = "200"
    target = "/index.html"
  }

Dispenser

Answer 6

For AWS AMPLIFY

Source address: /iframe.html Target address: /iframe.html
Type: 200 (Rewrite)

Source address: /<*> Target address: /index.html Type: 404 (Redirect)

Source address: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|xlsx)$)([^.]+$)/> Target address: /index.html Type: 200 (Rewrite)

how it should look

Sodalite