Skip to content
Get help on Slack

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
Apr 30, 2021, 4:30 PM
Thank you
user A
that worked a treat! Good to know
May 1, 2021, 1:24 PM

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?