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

我真的很困惑这是什么类型的错误。正如我所说，一旦您进行任何更改，甚至 space 或在某处删除 space 或更改字母，故事就会出现。

在 main.js 文件中，我尝试将：故事：['../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 不是那个有错误的，这似乎是 Chart 的错。

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

Storybook only loads stories when I make changes

storybook