用react安装故事书

Question

我尝试运行npm运行故事书后，第一次安装在我的新的创建-反应-应用程序的应用程序，我得到了这个错误。有人知道怎么解决这个问题吗？

$ npm run storybook

> mystorybookapp@0.1.0 storybook   
> start-storybook -p 6006 -s public

info @storybook/react v6.4.22
info 
(node:19248) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
ERR! TypeError: details.family.toLowerCase is not a function
ERR!     at C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\ip\lib\ip.js:385:39       
ERR!     at Array.filter (<anonymous>)
ERR!     at C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\ip\lib\ip.js:384:37       
ERR!     at Array.map (<anonymous>)
ERR!     at ip.address (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\ip\lib\ip.js:379:37)
ERR!     at getServerAddresses (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\utils\server-address.js:20:55)
ERR!     at storybookDevServer (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\dev-server.js:91:67)       
ERR!     at async buildDevStandalone (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31) 
ERR!     at async buildDev (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)
ERR!  TypeError: details.family.toLowerCase is not a 
function
ERR!     at C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\ip\lib\ip.js:385:39       
ERR!     at Array.filter (<anonymous>)
ERR!     at C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\ip\lib\ip.js:384:37       
ERR!     at Array.map (<anonymous>)
ERR!     at ip.address (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\ip\lib\ip.js:379:37)
ERR!     at getServerAddresses (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\utils\server-address.js:20:55)
ERR!     at storybookDevServer (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\dev-server.js:91:67)       
ERR!     at async buildDevStandalone (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31) 
ERR!     at async buildDev (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Answer 1

这也是我刚刚面临的一个非常烦人的问题。所以为了消除这个愚蠢的static-dir问题

1. 从脚本中删除-s public

从这里开始

  "scripts": {
    "test": "react-scripts test",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },

到这个

  "scripts": {
    "test": "react-scripts test",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

1. 另外，将staticDirs: ["../public"],设置在.storybook/main.js中，如下所示：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  staticDirs: ["../public"]
}

更多信息可以在这里找到：https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag

Answer 2

截至2022年5月30日。

故事书似乎不适用于Node v18，来源。