[gatsby-plugin-styled-components] Can't resolve 'react-is'

[andrelandgraf]

Description

3:34:32 PM: failed Building production JavaScript and CSS bundles - 40.804s
3:34:32 PM: error Generating JavaScript bundles failed
3:34:32 PM: Can't resolve 'react-is' in '/opt/build/repo/node_modules/styled-components/dist'
3:34:32 PM: If you're trying to use a package make sure that 'react-is' is installed. If you're trying to use a local file make sure that the path is correct.

Steps to reproduce

This error only occurs during build. I was not able to reproduce the issue with gatsby develop

I updated gatsby, all gatsby plugins, and styled-components to the latest version but the error persists.

The latest gatsby styled-compoents documentation includes the installation of a babel plugin which I was missing. I installed it now but the error persists:

• babel-plugin-styled-components: ^1.12.0
• styled-components: ^5.3.0

I cloned the gatsby styled-components starter but I was not able to replicate the error running build locally.

Workaround: I added react-is to my dependencies manually which resolved the issue. But I guess that's not a desired fix. Any help is highly appreciated!

Expected result

Build runs through

Actual result

Build fails

Environment

babel-plugin-styled-components: ^1.12.0
styled-components: ^5.3.0
react: ^17.0.2
react-dom: ^17.0.2

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.15.4 - /usr/local/bin/node
npm: 7.6.3 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.77
Safari: 14.0.3
npmPackages:
gatsby: ^3.7.1 => 3.7.1
gatsby-plugin-image: ^1.7.1 => 1.7.1
gatsby-plugin-manifest: ^3.7.1 => 3.7.1
gatsby-plugin-offline: ^4.7.1 => 4.7.1
gatsby-plugin-react-helmet: ^4.7.1 => 4.7.1
gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2
gatsby-plugin-sass: ^4.7.1 => 4.7.1
gatsby-plugin-sharp: ^3.7.1 => 3.7.1
gatsby-plugin-sitemap: ^4.3.1 => 4.3.1
gatsby-plugin-styled-components: ^4.7.1 => 4.7.1
gatsby-plugin-typescript: ^3.7.1 => 3.7.1
gatsby-source-filesystem: ^3.7.1 => 3.7.1
gatsby-transformer-sharp: ^3.7.1 => 3.7.1

[maksymalist]

Did you maybe forget to import react?

[andrelandgraf]

Hey John! I just checked all my recently created / changed components in the last commits and I am fairly confident that all components import React. Also, eslint goes nuts if I do remove React from one component and once I try to render the specific page, Gatsby throws "React is not defined". I am fairly confident that I would have discovered this.

[maksymalist]

Maybe since react got a new update your version of react is not up to date so could you try updating it ?

[andrelandgraf]

Both react and react-dom are at latest!

• react: ^17.0.2
• react-dom: ^17.0.2

[maksymalist]

Try doing "npm list react" and show me what it looks like.

[andrelandgraf]

Thanks for your help! So you are thinking it's a react mismatch that prompts this issue?

npm list react:

├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @gatsbyjs/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

[maksymalist]

Probably, I have seen this issue often recently I think it's because you have a corrupted Node environment on your machine. I would suggest wiping the plugin-sample and start again (or at least remove the node_modules and package-lock.json. I have seen this work but don't take my word for it.

[LekoArts]

This is a problem with your local installation. As John said it can help if you nuke node_modules/package-lock.json and redo the install. Maybe also try the --legacy-peer-deps flag.

[andrelandgraf]

Thank you very much for your support, I really appreciate the explanations! I will figure this out then. Sad thing is, it also happens on my Netlify build pipeline but I have had similar experiences with the pipelines in the past, even after clearing the cache. I might try to force a nodejs version on Netlify and see how that works out.

I hope this thread pops up for others having similar issues, so it provides guidance for others as well!

[Dankni95]

Were you able to find a solution to this?

Experiencing the same problem.

[andrelandgraf]

I haven't had the time yet. react-is is still in my dependencies which is also not the end of the world.