Search code examples
storybook

Failed to load preset: "@storybook/addon-info" on level 1

everything was fine yesterday. this problem occurs after I installing prop-types in my create-react-app project. the error message is as follows: Can someone tell me where the problem is and how to solve it? thank you. thank you very much .

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

  • It seems that @storybook/addon-info is being superceded by @storybook/addon-docs. If it's possible for you, I would recommend you to try and replace the library. You can read more about it in this article.

    If you want or need to stick to your original setup, try and add the @storybook/addon-info module in the exlude option for the css loader or tweak the include option as mentioned in the comments here.

    I didn't test it, but it would go something like:

    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
}

    I had the same problem, but since I was starting out the project I just switched libraries.