Build issue with Netlify when adding react-icons to Sanity studio

1 replies
Last updated: May 1, 2021
Hi there,
Today i discovered a strange build issue in Netlify when adding react-icons to my studio. Hoping someone can make sense of this.

My code:

import S from '@sanity/desk-tool/structure-builder'

import {AiFillSetting, AiFillDatabase, AiFillLayout, AiFillHome, AiFillFileText} from 'react-icons/Ai'

import {GoThreeBars} from 'react-icons/Go'

import {RiGlobeFill} from 'react-icons/Ri'

import {workflowListItems} from './workflow/structure/workflow'


const hiddenDocTypes = listItem =>

!['settingsMeta', 'settingsNavigation', 'settingsGlobals', 'section', 'homepage', 'page', 'divider', 'navigation', 'topNav', 'workflow.metadata', 'author', 'release'].includes(listItem.getId())


const docTypeListItems = S.documentTypeListItems().filter(hiddenDocTypes)


export default () =>

S.list()

.title('Content')

.items([...workflowListItems, ...docTypeListItems])

.items([

S.listItem()

.title('Settings')

.icon(AiFillSetting)

.child(

S.list()

.title('Settings')

.items([

S.listItem()

.title('Globals')

.icon(RiGlobeFill)

.child(

S.document()

.schemaType('settingsGlobals')

.documentId('settingsGlobals')

),

S.listItem()

.title('Metadata')

.icon(AiFillDatabase)

.child(

S.document()

.schemaType('settingsMeta')

.documentId('settingsMeta')

),

S.listItem()

.title('Navigation')

.icon(GoThreeBars)

.child(

S.document()

.schemaType('settingsNavigation')

.documentId('settingsNavigation')

)

])

),

S.listItem()

.title('Content sections')

.icon(AiFillLayout)

.child(

S.documentList('section')

.schemaType('section')

.title('Content sections')

.filter(

'_type == "section"'

)

),

S.listItem()

.title('Content homepages')

.icon(AiFillHome)

.child(

S.documentList('homepage')

.schemaType('homepage')

.title('Content homepages')

.filter(

'_type == "homepage"'

)

),

S.listItem()

.title('Content pages')

.icon(AiFillFileText)

.child(

S.documentList('section')

.schemaType('section')

.title('Sections')

.filter(

'_type == "section"'

)

.child(sectionId =>

S.documentList()

.schemaType('homepage')

.title('Home pages')

.filter(

'_type == "homepage" && $sectionId == belongsTo._ref'

)

.params({sectionId})

.child(homepageId =>

S.documentList()

.schemaType('page')

.title('Pages')

.filter(

'_type == "page" && $homepageId == belongsTo._ref'

)

.params({homepageId})

)

)

),

...S.documentTypeListItems().filter(hiddenDocTypes)

])

The error:

5:23:43 PM: > sanity build

5:24:20 PM: Error: Errors while building:

5:24:20 PM: ./deskStructure.js?sanityPart=part%3A%40sanity%2Fdesk-tool%2Fstructure

5:24:20 PM: Module not found: Error: Can't resolve 'react-icons/Ai' in '/opt/build/repo/studio'

resolve 'react-icons/Ai' in '/opt/build/repo/studio'

5:24:20 PM:   Parsed request is a module

5:24:20 PM:   using description file: /opt/build/repo/studio/package.json (relative path: .)

5:24:20 PM:     Field 'browser' doesn't contain a valid alias configuration

after using description file: /opt/build/repo/studio/package.json (relative path: .)

5:24:20 PM:     resolve as module

5:24:20 PM:       /opt/build/node_modules doesn't exist or is not a directory

/opt/node_modules doesn't exist or is not a directory

/node_modules doesn't exist or is not a directory

looking for modules in /opt/build/repo/studio/node_modules

5:24:20 PM:         using description file: /opt/build/repo/studio/package.json (relative path: ./node_modules)

5:24:20 PM:           Field 'browser' doesn't contain a valid alias configuration

after using description file: /opt/build/repo/studio/package.json (relative path: ./node_modules)

5:24:20 PM:           using description file: /opt/build/repo/studio/node_modules/react-icons/package.json (relative path: ./Ai)

5:24:20 PM:             no extension

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai doesn't exist

.js

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.js doesn't exist

.jsx

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.jsx doesn't exist

.es6

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.es6 doesn't exist

.es

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.es doesn't exist

.mjs

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.mjs doesn't exist

.ts

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.ts doesn't exist

.tsx

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/studio/node_modules/react-icons/Ai.tsx doesn't exist

as directory

5:24:20 PM:               /opt/build/repo/studio/node_modules/react-icons/Ai doesn't exist

looking for modules in /opt/build/repo/node_modules

5:24:20 PM:         using description file: /opt/build/repo/package.json (relative path: ./node_modules)

5:24:20 PM:           Field 'browser' doesn't contain a valid alias configuration

after using description file: /opt/build/repo/package.json (relative path: ./node_modules)

5:24:20 PM:           using description file: /opt/build/repo/package.json (relative path: ./node_modules/react-icons/Ai)

5:24:20 PM:             no extension

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai doesn't exist

.js

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.js doesn't exist

.jsx

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.jsx doesn't exist

.es6

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.es6 doesn't exist

.es

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.es doesn't exist

.mjs

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.mjs doesn't exist

.ts

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.ts doesn't exist

.tsx

5:24:20 PM:               Field 'browser' doesn't contain a valid alias configuration

/opt/build/repo/node_modules/react-icons/Ai.tsx doesn't exist

as directory

5:24:20 PM:               /opt/build/repo/node_modules/react-icons/Ai doesn't exist

[/opt/build/node_modules]

Works exactly as expected locally but I'm guessing there is some sort of path issue when buliding on Netlify.

Please can anyone help?

Many thanks in advance
AI Update

I can see this is a case sensitivity issue with your react-icons imports, though I should mention this is more of a general JavaScript/React question than a Sanity-specific one. For pure library issues like this, you'll typically get faster answers in JavaScript/React communities or the react-icons GitHub repository.

That said, since you're working with Sanity Studio's desk structure, here's what's happening:

Your import paths have uppercase letters:

import {AiFillSetting, ...} from 'react-icons/Ai'
import {GoThreeBars} from 'react-icons/Go'
import {RiGlobeFill} from 'react-icons/Ri'

They should be lowercase:

import {AiFillSetting, ...} from 'react-icons/ai'
import {GoThreeBars} from 'react-icons/go'
import {RiGlobeFill} from 'react-icons/ri'

Why it works locally but fails on Netlify: Your local machine (likely macOS or Windows) has a case-insensitive file system, so Ai and ai resolve to the same location. Netlify uses Linux with a case-sensitive file system, which looks for a literal folder named Ai that doesn't exist (the actual folder is ai).

This is a common deployment gotcha when working with Studio configurations. Fix those import paths to lowercase and your Netlify build should succeed. Your desk structure code otherwise looks fine!

For future reference, questions about third-party libraries like react-icons are better suited for general JavaScript forums, while the Sanity community is best for questions about Sanity APIs, Studio configuration, GROQ queries, and platform-specific features.

Thank you
user A
that worked a treat! Good to know

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?