Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module not found for '@icons/material/...' - when installing as peer of @storybook/addon-docs

See original GitHub issue

I’d like to use @storybook/addon-docs which uses this package as a color picker. When starting storybook, it throws:


ERROR in ./node_modules/react-color/lib/components/swatches/SwatchesColor.js
Module not found: Error: Can't resolve '@icons/material/CheckIcon' in '/Users/myuser/git/myproject/node_modules/react-color/lib/components/swatches'
 @ ./node_modules/react-color/lib/components/swatches/SwatchesColor.js 22:17-53
 @ ./node_modules/react-color/lib/components/swatches/SwatchesGroup.js
 @ ./node_modules/react-color/lib/components/swatches/Swatches.js
 @ ./node_modules/react-color/lib/index.js
 @ ./node_modules/@storybook/components/dist/controls/Color.js
 @ ./node_modules/@storybook/components/dist/controls/index.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./node_modules/react-color/lib/components/chrome/ChromeFields.js
Module not found: Error: Can't resolve '@icons/material/UnfoldMoreHorizontalIcon' in '/Users/myuser/git/myproject/node_modules/react-color/lib/components/chrome'
 @ ./node_modules/react-color/lib/components/chrome/ChromeFields.js 28:32-83
 @ ./node_modules/react-color/lib/components/chrome/Chrome.js
 @ ./node_modules/react-color/lib/index.js
 @ ./node_modules/@storybook/components/dist/controls/Color.js
 @ ./node_modules/@storybook/components/dist/controls/index.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

Any ideas how this can be fixed? I already tried installing @icons/material in the version of this package by myself but it does not change anything.

Issue Analytics

State:
Created 3 years ago
Comments:6

Top GitHub Comments

3reactions

jedwards1211commented, Oct 26, 2020

@hendriku Are you using yarn? I realized what happened in my case: I accidentally ran two yarn install processes at once, and this messed up the yarn cache (which explains why the package.json was also missing). Doing yarn cache clean && rm -rf node_modules && yarn fixed it for me.

1reaction

jedwards1211commented, Oct 26, 2020

Pinning with yarn solved this for me:

  "resolutions": {
    "@icons/material": "0.4.0"
  },

But man this is the stuff of nightmares.

Top Results From Across the Web

Developers - when installing as peer of @storybook/addon-docs

Module not found for '@icons /material/...' - when installing as peer of @storybook/addon-docs.

Fix NPM7 peer dependencies · Issue #14119 - GitHub

NPM7 has changed the semantics of peer dependencies which caused NPM to fail: #12983. I updated the CLI to use --legacy-peer-deps to work ......

Module not found: Can't resolve '@mui/icons-material ...

I am trying to import "FileDownloadIcon" from Material icons. Installing "@material-ui/core": npm i @material-ui/core. Installing "@material-ui ...

storybook/addon-docs - npm

When you install Docs, every story gets a DocsPage . DocsPage pulls information from your stories, components, source code, and story metadata ...

can't resolve '@mui/icons-material - You.com | The AI Search ...

Try this command npm install @mui/material @emotion/react @emotion/styled. Open side panel. Module not found: Can't resolve '@material-ui/icons/ContentCut'.