Skip to content
🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup
Get help on Slack

Issue with building Gatsby site in CI pipeline due to react-icons package

5 replies
Last updated: Jul 22, 2020
Hi! I have been battling a weird issue with building my Gatsby site in a CI pipeline. The problem seems to be somehow related to the package 
react-icons
in my 
studio
.
Everything works fine when building the site locally, but in a CI the build fails. I’ve tried building in Netlify as well as Github Actions.

The error I get is following:

success Build manifest and related icons - 1.382s
success onPostBootstrap - 1.391s
info bootstrap finished - 7.327s
success run static queries - 0.069s - 17/17 247.95/s
success run page queries - 0.183s - 68/68 371.98/s
success write out requires - 0.003s
failed Building production JavaScript and CSS bundles - 27.655s
error Generating JavaScript bundles failed

Can't resolve 'react-icons/fi' in '/home/runner/work/site-name/studio/schemas/objects/sections'

If you're trying to use a package make sure that 'react-icons/fi' is installed. If you're trying to use a local file make sure that the path is correct.
I have 
react-icons
installed in both 
web
and 
studio
. Do you have any idea why this is happening? Why does 
gatsby build
try to resolve modules from another directory?
Jul 17, 2020, 11:08 AM
Hi User! This doesn’t explain why it would work locally, but still: are you using 
v3.x
of 
react-icons
in your 
package.json
file? The earlier versions (including the one shipped with the Studio) have a different way of importing the icons. More info: https://github.com/react-icons/react-icons#migrating-from-version-2---3
Jul 17, 2020, 11:26 AM
Hi User! This doesn’t explain why it would work locally, but still: are you using 
v3.x
of 
react-icons
in your 
package.json
file? The earlier versions (including the one shipped with the Studio) have a different way of importing the icons. More info: https://github.com/react-icons/react-icons#migrating-from-version-2---3
Jul 17, 2020, 11:26 AM
Also, make sure that you've declared 
react-icons
as a dependency in your 
studio/package.json
. It's easy to forget, and sometimes leads to it finding a different version of react-icons somewhere else (because it's used by the frontend, for instance) and uses that, which can lead to these sort of errors.
Jul 17, 2020, 11:45 AM
Turned out I was just stupid 😄 Some weird VS Code autocorrect thing had corrected me to import something from the studio directory within a component on my Gatsby site 😅
Huge thanks for the help though, User and User, appreciate it
🙂
Jul 21, 2020, 6:17 PM
Glad to hear it was just an autocorrect issue, nasty as that is 😉 Thanks for posting back!
Jul 22, 2020, 11:50 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?