Storybook build success but error when serving - storybook

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

add "#storybook/builder-webpack5": "^6.2.9",
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

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

Answer 3

Are you trying to deploy it to amplify?

Answer 4

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

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"
}

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