React is not defined after running sanity upgrade

2 replies
Last updated: Apr 10, 2021
Hello! I wonder if this is a known issue, I just upgraded an older project with
sanity upgrade
and now get
React is not defined
when I try to run it in the browser. The project really isn't complex but I can't seem to find the source of the problem.
AI Update

This is a known issue that can occur after upgrading Sanity Studio, particularly when moving from v2 to v3. The "React is not defined" error typically happens due to build configuration issues. Here's how to fix it:

Clear Your Build Cache First

Before making any configuration changes, try clearing your build artifacts:

rm -rf node_modules/.sanity
rm -rf node_modules/.cache
rm -rf .sanity

Then reinstall dependencies:

npm install
# or
yarn install

Check Your TypeScript Configuration

If clearing the cache doesn't resolve it, check your tsconfig.json. According to the Sanity Studio configuration documentation, the correct default setting for Sanity Studio v3 is:

{
  "compilerOptions": {
    "jsx": "preserve",
    // ... other options
  }
}

The "jsx": "preserve" setting is the standard for Sanity Studio v3. However, if you're still getting "React is not defined" errors with this setting, it may be due to:

  1. Custom components or plugins that were written for Studio v2 and expect explicit React imports
  2. Vite bundler requirements - Studio v3 uses Vite, which requires files containing JSX to have .jsx or .tsx extensions

Additional Troubleshooting Steps

Verify your Node version: Sanity Studio v3 requires Node.js 18 or higher. Studio v4 requires Node.js 20+. Check with:

node -v

Check your sanity.config file extension: If you have custom components with JSX in your sanity.config.js, rename it to sanity.config.jsx or sanity.config.tsx. Vite requires the proper extension for JSX transformation.

Review custom components: If you have custom input components or plugins, make sure any files containing JSX have the correct file extension (.jsx or .tsx).

Verify the upgrade completed: Run sanity upgrade again to ensure all packages are properly updated:

sanity upgrade

The most common cause of this error after upgrading is stale build cache combined with the new Vite bundler's stricter requirements about file extensions. The cache-clearing step resolves this in most cases.

Show original thread
2 replies
Hi
user B
, could you check if there might be a missing React import in your schema definitions or custom components?
Alternatively, could you try removing your
node_modules
folder and
package-lock.json
+
yarn-lock.json
files before running
npm i
and trying once more to start the studio?
Thanks for the hint, I should have known better πŸ˜› - it was a missing import on a custom plugin.

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?