javascript - 样式化组件嵌套组件出错

Question

我正在尝试找出为什么会出现错误。 虽然如果我没有 CardWrapper 包裹 CardImage 图像正在显示。

import React from 'react'
import styled, { css } from 'styled-components'

const CardWrapper = styled.div`
    background-color: yellow;
    border-color: 1px solid red;
    position: relative;
`
const CardImage = styled.img`
    height: auto;
    width: 100%;
`

const Card = props => {
    return (
      <CardWrapper>
        <CardImage src={props.data.imageUrl}/>
    </CardWrapper>
    )
}

export default Card;

App.js

<Card data={{imageUrl: 'https://via.placeholder.com/630x354', logoUrl: "https://via.placeholder.com/100x100", text: "test"}}/>

错误

./src/Components/Card/Card.js
 Error: Cannot find module '/Users/max/test/test/test/node_modules/babel-preset-react-app/node_modules/@babel/core/lib/index.js'. Please verify that the package.json has a valid "main" entry

Answer 1

看起来您需要安装 Node.js 包。在终端中，导航到项目的根目录并运行:

npm install babel-preset-react-app