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!

Answer 1

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).