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

Posted 2023-02-19

【中文标题】Storybook 仅在我进行更改时加载故事

【英文标题】：Storybook only loads stories when I make changes

【发布时间】：2021-12-19 07:12:14

【问题描述】：

。 所以当我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 文件中，我尝试将：故事：['../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>

包.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"
  ,

【参考方案1】：

"chart.js": "^3.6.0",

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

我猜故事书没有处理这种奇怪的情况，并且在控制台中没有加载任何内容。这很好，因为故事书不是有错误的，这似乎是 Chart 的错。