Storybook仅在我进行更改时加载故事

Question

Storybook仅在我进行更改时加载故事。因此，当我在yarn start上搜索我的故事书时，它显示为：

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config. Try reloading the page. If the problem persists, check the browser console, or the terminal you've run Storybook from.

当我更改其中一个*.stories.jsx文件时，它会突然显示所有的故事。我是从2015年的故事书中过来的，在那里所有的东西都被添加为StoriesOf()。

chrome中的检查工具显示：

index.js:49 Unexpected error while loading ./broadcast.stories.jsx: TypeError: Cannot read properties of undefined (reading 'extend')

我真的很困惑这到底是什么类型的错误。正如我所说的，一旦你做了任何修改，故事就会出现，即使是一个空格，或者删除某个空格，或者更改一个字母，故事就会加载起来。

在main.js文件中，我尝试将stories：['../src/stories/**/*.stories.@(js|jsx|ts|tsx)']更改为我在互联网上找到的各种建议。

const path = require("path");
const resolve = uri => path.resolve(__dirname, uri);

module.exports = {
    stories: ['../src/stories/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-docs', '@storybook/addon-knobs', '@storybook/addon-actions', '@storybook/addon-viewport'],
    rules: [{
                test: /\.(scss|sass)$/,
                loaders: ["style-loader", "css-loader", "sass-loader"],
                include: path.resolve(__dirname, "../")
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader?name=fonts/[name].[ext]',
                include: path.resolve(__dirname, "../src/fonts")
            },
            {
                test: /\.(jpg|png|svg)$/,
                loader: 'url-loader',
                options: {
                limit: 25000,
                }
            },
        ],
    watch: true,
    resolve: {
        alias: {
            i18n: resolve('../src/i18n'),
        },
        extensions: ['.js', '.jsx'],
        modules: ['node_modules'],
  }
}

一个故事的例子：

export default {
  title: 'ScalableWrapper',
  component: ScalableWrapper,
  decorators: [],
  parameters: {},
}

export const Background = () => <ScalableWrapper style={{ overflow: 'scroll' }}>
  <AnimatedBackground
    disableAnimationBG={boolean("Disable Animation", false)}
    background={text("Background", backgroundImage)}
    brushPattern={repeatableBrush}
  /></ScalableWrapper>

Package.JSON：

"devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-knobs": "^6.3.1",
    "@storybook/addon-viewport": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.3.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^1.13.3",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "babel-plugin-transform-react-stateless-component-name": "^1.1.2",
    "chai": "^4.3.4",
    "css-loader": "^6.5.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "jest": "^27.3.1",
    "jest-enzyme": "^7.1.2",
    "node-sass": "^6.0.1",
    "postcss-loader": "^6.2.0",
    "react-test-renderer": "^17.0.2",
    "sass-loader": "^12.3.0",
    "storybook-addon-specifications": "^2.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.61.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-dev-middleware": "^5.2.1",
    "webpack-dev-server": "^4.4.0"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.16.0",
    "chart.js": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-click-outside": "^3.0.1",
    "react-dom": "^17.0.2",
    "react-pose": "^4.0.10",
    "react-spring": "^9.3.0",
    "react-textfit": "^1.1.1",
    "styled-components": "^5.3.3",
    "styled-tools": "^1.7.2"
  },

Answer 1

"chart.js"："^3.6.0"，

Chart JS，当它发生错误时，它不会抛出错误消息，有时只是静默地中断。

我猜storybook对于这种奇怪的情况没有句柄，并且在控制台中加载任何东西都没有错误。这很好，因为storybook不是有错误的那个，这似乎是Chart的错。