样式化组件嵌套组件出错

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