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.

Can't resolve 'styled-components'

See original GitHub issue

I imported two icons into my project, and got this error:

ERROR in ./node_modules/grommet-icons/es6/StyledIcon.js 37:0-48
Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\mikwee\partymap\node_modules\grommet-icons\es6'
 @ ./node_modules/grommet-icons/es6/icons/Accessibility.js 20:0-43 22:42-52
 @ ./node_modules/grommet-icons/es6/icons/index.js 1:0-32 1:0-32
 @ ./node_modules/grommet-icons/es6/index.js 2:0-24 2:0-24
 @ ./src/App.js 8:0-42 29:38-41 43:37-41
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/grommet-styles/es6/styles/color.js 1:0-40
Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\mikwee\partymap\node_modules\grommet-styles\es6\styles'
 @ ./node_modules/grommet-styles/es6/styles/index.js 1:0-24 1:0-24
 @ ./node_modules/grommet-styles/es6/index.js 1:0-25 1:0-25
 @ ./node_modules/grommet-icons/es6/StyledIcon.js 38:0-44 41:9-19 43:9-19
 @ ./node_modules/grommet-icons/es6/icons/Accessibility.js 20:0-43 22:42-52
 @ ./node_modules/grommet-icons/es6/icons/index.js 1:0-32 1:0-32
 @ ./node_modules/grommet-icons/es6/index.js 2:0-24 2:0-24
 @ ./src/App.js 8:0-42 29:38-41 43:37-41
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/grommet-styles/es6/styles/size.js 1:0-40
Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\mikwee\partymap\node_modules\grommet-styles\es6\styles'
 @ ./node_modules/grommet-styles/es6/styles/index.js 2:0-23 2:0-23
 @ ./node_modules/grommet-styles/es6/index.js 1:0-25 1:0-25
 @ ./node_modules/grommet-icons/es6/StyledIcon.js 38:0-44 41:9-19 43:9-19
 @ ./node_modules/grommet-icons/es6/icons/Accessibility.js 20:0-43 22:42-52
 @ ./node_modules/grommet-icons/es6/icons/index.js 1:0-32 1:0-32
 @ ./node_modules/grommet-icons/es6/index.js 2:0-24 2:0-24
 @ ./src/App.js 8:0-42 29:38-41 43:37-41
 @ ./src/index.js 7:0-24 11:33-36

From looking at these files, it seems like a lot of them are calling folders that don’t exist. What’s going on?

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

1reaction

mikweecommented, Feb 23, 2022

Actually, I installed and imported those icons again, and it works just fine. Thank you for the help anyway!

0reactions

haloclinecommented, Feb 23, 2022

Thanks. styled-components looks good. Now we need to re-add grommet-icons as a dependency, and then we need to go through the steps to reproduce the error.

I’ve set up a real basic Create React App CodeSandbox and successfully imported an icon from grommet-icons. You can fork it and use it to recreate the error.

Top Results From Across the Web

Module not found: Can't resolve 'styled-components'

To solve the error "Module not found: Error: Can't resolve 'styled-components'", make sure to install the styled-components package by opening your terminal ...

Module not found: Can't resolve 'styled-component' [closed]

I created a new react app using create-react-app and then installed styled-component using npm . But when I use it in component, I...

module not found can't resolve 'styled-components' - YouTube

React #ReactSolutions #SyledComponentsThis video will solve can't resolve ' styled-components ' errors in react.

Module not found: Can't resolve 'styled-components' · Issue #44

After I have installed the package, the compiler gives to me this error, anyone knows how fix it??

styled-components - npm

Start using styled-components in your project by running `npm i styled-components`. There are 19798 other projects in the npm registry using ...