Gatsby build fails resolving react-icons from studio directory in CI

This is a classic monorepo/workspace issue where Gatsby's build process is crawling into your Studio directory and attempting to resolve imports it finds in your schema files. The key question is: why is Gatsby even looking at your Studio schemas?

The most likely culprit is that you're importing or referencing something from your Studio schemas in your Gatsby site code, or Gatsby's webpack configuration is inadvertently including the Studio directory in its module resolution scope.

Here's how to fix this:

1. Verify You're Not Importing Studio Schemas Directly

First, check if your Gatsby code (web directory) is importing anything from studio/schemas. Search your web codebase for imports like:

import something from '../../studio/schemas/...'

If you find any, remove them. Your Gatsby site should only consume content from Sanity via gatsby-source-sanity, not by importing schema files directly.

2. Configure Webpack to Exclude Studio Directory

Add this to your gatsby-node.js to explicitly tell webpack to ignore your Studio folder:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        // Prevent webpack from resolving studio directory
        '../studio': false,
        '../../studio': false,
      }
    }
  })
}

Or use webpack's externals configuration:

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  if (stage === 'build-javascript' || stage === 'build-html') {
    actions.setWebpackConfig({
      externals: {
        'react-icons/fi': 'react-icons/fi'
      }
    })
  }
}

3. Adjust Your Monorepo Structure

If you're using npm/yarn workspaces, ensure your workspace configuration properly isolates the projects. In your root package.json:

{
  "private": true,
  "workspaces": [
    "web",
    "studio"
  ]
}

Make sure your Gatsby build command runs from within the web directory, not from the root:

cd web && gatsby build

4. Check Your .gitignore and Build Configuration

CI environments might be handling symlinks or hoisted dependencies differently than your local machine. Ensure your CI build:

• Installs dependencies in both web and studio directories
• Runs the build from the correct working directory
• Doesn't have different NODE_ENV or path resolution settings

5. Quick Workaround (Not Recommended Long-term)

If you need an immediate fix, install react-icons in your web project:

cd web
npm install react-icons

This works around the resolution issue but doesn't address the root cause.

The real solution is #1 and #2 combined: ensure your Gatsby site isn't importing Studio code, and configure webpack to ignore the Studio directory entirely. Your Studio schemas shouldn't be part of your Gatsby build process—Gatsby should only interact with Sanity through the gatsby-source-sanity plugin to fetch content via the Content Lake API.