Inconsistent React versions while using styled-components?

[sbarre]

I'm having a strange issue that is stumping me.

In an existing working JSX component I brought in a library called styled-components and locally everything worked fine.

Then when I deployed via my CICD, which creates a new container fresh without a cache, I get an error on the page that uses this component. I tracked it down to the bundle including both React 19 and React 17.

It looks like styled-components prefers React 17 (this is a guess), but can work with newer versions?

When I then run a npm run clean on my local dev environment, suddenly I am also getting the same error that I get in CICD, and my local dev no longer works.

So it seemed like on initial install of this styled components library, the state of my local packages cache meant nothing new needed to be installed but when I cleared my cache and then ran dev mode again, it had to re-evaluate dependencies and installed React v17..

I've tried pinning versions in my imports but that isn't helping. Pinning all the React imports to @19 still results in React v17 being installed in the bundle alongside v19 during a clean build, which causes a runtime error...

Any thoughts/ideas are welcome.. Framework's build is a bit opaque to me... Can I provide more information?

[sbarre]

It looks like the version of styled-components that is being served by jsDelivr comes bundled with [email protected], or is built with that version...

From the cache/_npm/[email protected]/_esm.js file:

import r,{useState as o,useMemo as i,useEffect as s,useContext as a,createElement as c}from"../[email protected]/_esm.js"

The package.json file that's in the styled components folder does list React v17 in devDependencies:

"devDependencies": {
[...]
  "react": "17.0.2",
  "react-dom": "17.0.2",
[...]
}

By all accounts this just seems like an incompatibility, but I'm stumped as to why this worked at first? I just spent the whole day building out several JSX components using this library, and in local dev mode it all worked fine, I was even sharing screenshots with my boss, and now when I publish it, it doesn't work.. and when I clear my local cache it also doesn't work anymore.

[sbarre]

I suspect the new (broken) React v19 is the issue here, not styled components... I'll close this for now.

I opened an issue for anyone also dealing with React 19 + JSX problems. Mike posted a workaround for now in the issue.