故事书构建成功但服务时出错

Question

我在为构建的故事书提供服务时遇到了问题。正如您在下面看到的，它只显示了一个旋转器旋转到被遗忘的状态。当我打开控制台时，它说： Error: manager received sharedStateChanged-manager-storybook/viewport but was unable to determine the source of the event

这是我的故事书配置文件：

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].*" },
}

为了制作故事书，我运行 build-storybook -o ./build -s ./public -c .storybook 我正在使用 npm，它告诉我做 npm run build-storybook -- -o ... 但它没有按预期运行。另外，我目前使用 "@storybook/react": "^6.1.21"

有没有人遇到过这个问题？你能帮我修一下吗？之前非常感谢！

Answer 1

您是否尝试部署它来放大？

Answer 2

添加 "@storybook/builder-webpack5": "^6.2.9",

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

Answer 3

当我遇到这个问题时，我开始使用 npx serve -s 提供静态文件。

将启动更改为 npx serve 解决了问题（这是托管在 Azure 中的 Linux 网络应用程序上）。

Answer 4

如果您尝试将其部署到 Amplify，您需要重写一些规则：（从上到下）

第一条规则：Source: /iframe.html Target: /iframe.html

第二条规则：Source: /<*> Target: /index.html

第三条规则：Source: </^[^.]+$|\.(?!(css|xml|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> Target: /index.html

请注意第一个规则的目标是 iframe.html

故事书构建成功但服务时出错

Storybook build success but error when serving

storybook