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

Question

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

> [email protected] 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)

Ingeingeberg

Answer 1

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.

Duke

Answer 2

In case someone lands with a similar error:

I removed @storybook/addon-links from package.json but forgot to remove it from the addons list in main.ts.

That resulted in something similar:

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)

Cissoid

Answer 3

I ran into this exact error as I was integrating Storybook for Next.js and used this code in .storybook/main.js :

framework: {
  name: "@storybook/nextjs",
  options: {},
}

but i forget to add @storybook/nextjs to my devDependencies.

fix

ran this to fix the problem:

yarn add -D @storybook/nextjs

or

better fix would be to upgrade storybook to be compatible with next.js with the below commands, and with this you won't need the previous command:

If you already have storybook:

npx storybook@next init

If you haven't added storybook:

npx storybook@next upgrade --prerelease

Gryphon

I got the same issue and fixed it with: npx storybook@next init. Thanks alot. IM using turbo with next and storybook workspaces. – Blueprint