使用 React 安装 Storybook

Question

I tried running npm run storybook after installing it for the first time on my new create-react-app application and I am getting this error. Anybody know how to fix this ?

$ 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

It's a super annoying issue I just faced too. So in order to eliminate this silly static-dir issue

1. remove the -s public from the scripts

from this

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

to this

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

2. additionally set staticDirs: ["../public"], in your .storybook/main.js like this:

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"]
}

more info can be found here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag

Answer 2

As of date May 30, 2022.

Storybook doesn't seems to work with Node v18, source .