Error when building Next.js application due to import issue with styled-components.

12 replies
Last updated: Mar 25, 2024
Hey people! I was migrating from super old sanity-next to the latest version and so far everything works locally but on my github actions when trying to build next-js application I get this error:
   ▲ Next.js 14.1.4

   Creating an optimized production build ...
Failed to compile.

./node_modules/.pnpm/@sanity+ui@2.0.12_62vzzrxnsy3jqmiizpwx4sb5xu/node_modules/@sanity/ui/dist/index.mjs
Attempted import error: 'styled' is not exported from 'styled-components' (imported as 'styled').
Any clue what might be causing this?
AI Update

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.

Can you try installing
"styled-components": "^6"
just installed before your comment
did not work out
		"next-sanity": "^8.5.0",
		"next-sanity-image": "^6.1.1",
		"sanity": "^3.10.0",
		"sanity-plugin-markdown": "^4.1.0",
I have this setup, maybe it helps with ideas to debug it
as soon as I commented out Studio, next app built just fine
one the side note
user M
, the latest installed styled-components is
"styled-components": "^5.3.11",
Yes, that’s why I asked if you installed
^6
.
trying right now, thanks a lot for being super responsive! much appreciated!
seems like it is flying right now...
thanks a lot
user M
, best ❤️
Glad we got it working! :sanity_with_3_hearts:

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?