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 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.

Get started for free Explore the demo

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

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

Was this answer helpful?