当尝试在下一个 js 中使用样式组件时，react js 中的节点模块有错误

Question

我想在 nextjs react 中使用 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';

一旦我将样式组件（从 'styled-components' 导入样式；）导入我的 nextjs 应用程序，我就会收到以下错误：

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

error image

这是我的 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"
  }
}

我该如何解决这个错误？

Answer 1

“styled-components”的 package.json 中似乎缺少“s”，请尝试运行删除 node_modules，然后运行 npm i styled-组件

当尝试在下一个 js 中使用样式组件时，react js 中的节点模块有错误

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

compiler-errors

reactjs

styled-components

next.js