时间戳

首页 > 解决方案 > 尝试在下一个 js 中使用 styled-components 时，react js 中的节点模块有错误

reactjs - 尝试在下一个 js 中使用 styled-components 时，react js 中的节点模块有错误

问题描述

我想在 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 (import styled from 'styled-components';) 导入我的 nextjs 应用程序，我就会收到以下错误：

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

错误图像

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

我该如何解决这个错误？

标签： reactjscompiler-errorsnext.jsstyled-components

解决方案

看起来“styled-components”的 package.json 中缺少“s”，尝试运行删除 node_modules，然后运行 ​​npm i styled-components

推荐阅读