Sanity UI "styled not exported from styled-components" error in Next.js build

This is a dependency resolution issue that happens when migrating to newer Sanity versions! The error occurs because there's a mismatch in how your package manager is resolving the styled-components dependency in your CI environment versus locally.

The Solution

Upgrade to styled-components v6:

pnpm add styled-components@^6
# or
npm install styled-components@^6
# or  
yarn add styled-components@^6

After upgrading, clear your build cache and reinstall:

rm -rf node_modules pnpm-lock.yaml
pnpm install

Why This Happens

While Sanity UI v2 officially supports both styled-components v5 and v6 (with peer dependencies of "^5.2 || ^6"), there's a critical difference in how these versions work in practice:

• styled-components v6 has a different export structure that Sanity UI v2 is optimized for
• styled-components v5 uses an older export pattern that can cause import errors in certain dependency resolution scenarios

The reason it works locally but fails in GitHub Actions is due to dependency hoisting and resolution differences:

• Locally, your package manager (pnpm) might have cached or hoisted dependencies in a way that masks the compatibility issue
• In CI environments with clean installs, the dependency tree is resolved fresh, exposing the problem
• When you comment out Studio, the build succeeds because you're removing the Sanity UI dependency chain entirely

What Changed in Your Migration

When you migrated from "super old sanity-next," you likely jumped from Sanity v2 (which used styled-components v5) to Sanity v3 (which uses Sanity UI v2). While Sanity UI v2 maintains backward compatibility with v5, upgrading to v6 resolves the export/import mismatch you're experiencing.

Additional Considerations

If you're using styled-components in your own code, note that v6 has some changes:

• Requires React 18+
• Better TypeScript support
• Improved performance with React's useInsertionEffect hook

The community member who had the exact same error in their GitHub Actions build confirmed that upgrading to styled-components v6 resolved it immediately.