无法加载预设：第 1 级的“@storybook/addon-info”

Question

昨天一切都很好。在我的 create-react-app 项目中安装 prop-types 后，出现此问题。错误信息如下： 有人能告诉我问题出在哪里以及如何解决吗？谢谢。非常感谢 。

    MacBook-Pro:storybook_test beike$ npm run storybook

> storybook_test@0.1.0 storybook /Users/storybook_test
> start-storybook -p 9009 -s public

info @storybook/react v5.3.18
info 
info => Loading static files from: /Users/storybook_test/public .
info => Loading presets
WARN   Failed to load preset: "@storybook/addon-info" on level 1
ERR! /Users/storybook_test/node_modules/@storybook/addon-info/dist/components/PropTable/style.css:1
ERR! .info-table {
ERR! ^
ERR! 
ERR! SyntaxError: Unexpected token '.'
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1070:16)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1120:27)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1000:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:899:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1042:19)
ERR!     at require (internal/modules/cjs/helpers.js:77:18)
ERR!     at Object.<anonymous> (/Users/storybook_test/node_modules/@storybook/addon-info/dist/components/PropTable/components/Table.js:12:1)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1156:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:1000:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:899:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1042:19)
ERR!     at require (internal/modules/cjs/helpers.js:77:18)
ERR!     at Object.<anonymous> (/Users/storybook_test/node_modules/@storybook/addon-info/dist/components/PropTable/index.js:37:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1156:30)

Answer 1

如果有人遇到类似的错误：

我从 package.json 中删除，但忘记将其从中的列表中@storybook/addon-links删除。addonsmain.ts

这导致了类似的结果：

info => Loading presets
WARN   Failed to load preset: {"type":"presets"} on level 1
ERR! TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
ERR!     at new NodeError (internal/errors.js:322:7)
ERR!     at validateString (internal/validators.js:124:11)
ERR!     at Module.require (internal/modules/cjs/loader.js:967:3)

Answer 2

似乎@storybook/addon-info正在被@storybook/addon-docs取代。如果可能的话，我建议您尝试更换该库。您可以在本文中阅读更多相关信息。

如果您想要或需要坚持原来的设置，请尝试@storybook/addon-info在加载器exlude的选项中添加模块，或按照此处的注释中提到的方式css调整选项。include

我没有测试它，但它会是这样的：

const path = require('path')

module.exports = async ({ config }) => {
  config.module.rules = config.module.rules.filter(f => f.test.toString() !== '/\\.css$/')

  config.module.rules.push({
    test: /\.css$/,
    exclude: /node_modules(?!\/@storybook\/addon-info)/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
    include: path.resolve(__dirname, '../src'),
  })

  return config
}

我遇到了同样的问题，但自从我开始这个项目以来，我只是切换了库。