when trying to use styled-components in next js, node module in react js have error

Question

I want to use styled-component in nextjs react . This is how I use styled-component:

import styled from 'styled-components';

export const MainTitleContainer = styled.div`
    text-align:right;
    margin:3rem 0;
    padding:2rem;
`;

export const MainTitle = styled.h1`
    font-size:3.8rem;
    font-family:Bnazanin;
`; 

import {MainTitleContainer,MainTitle} from '../styles/Home.styles';

As soon as I import styled-components (import styled from 'styled-components';) into my nextjs app I get the following error:

../../node_modules/styled-components/dist/styled-components.browser.esm.js:1:73
Module not found: Can't resolve 'react'
null

error image

Here is my package.json:

{
  "name": "next-horse-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-component": "^2.8.0"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.13.2",
    "eslint": "7.31.0",
    "eslint-config-next": "11.0.1"
  }
}

How can I fix this error?

Answer 1

It looks like the "s" is missing in package.json for "styled-components", try running removing node_modules, and running npm i styled-components