CODEWITHSUNDEEP
javascriptreactjsstyled-components
Kiwimoisi
Kiwimoisi

Reputation: 4192

Styled Components Nested components erroring

I am trying to workout why this is erroring. Although If I do not have CardWrapper wrapping around CardImage the image is displaying.

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"}}/>

Error

./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

Upvotes: 0

Views: 74

Answers (1)

jared
jared

Reputation: 68

Looks like you need to install a Node.js package. In your terminal, navigate to the project's root directory and run:

npm install babel-preset-react-app

Upvotes: 1

Related Questions