Error: The requested module "xyz" does not provide an export named "xyz"

[open juniper]

I'm getting this error saying my named export doesn't match my module name.. but it does. I have no idea why I can't load my component. Anyone see what I'm doing wrong?

App.jsx:

import './App.css'
import { CardFront } from './components/CardFront'
import { CardBack } from './components/CardBack'

function App() {

  return (
    <>
      <div>
        <h1>project</h1>
        <CardFront />
        <CardBack />
      </div>
    </>
  )
}

export default App

CardFront.jsx:

import React from "react"
import card_front from "../assets/card_front.png"

export default function CardFront(){
    return(
        <img src="card_front">
            <h3>pinyin</h3>
            <h3>traditional character</h3>
        </img>
    )
}

CardBack.jsx:

import React from "react"
import card_back from "../assets/card_back.png"

export default function CardBack(){
    return(
        <img src="card_back">
            <h3>English def</h3>
        </img>
    )
}

[alpine cairn]

Yea you’ve got 2 mistakes in app.jsx

Since CardFront & Cardback are export default, you don’t use brackets to import them. You’ll need to remove them

[open juniper]

like this? I've tried this before and it didn't make a difference..

[alpine cairn]

Yea.

🤔 make sure your paths to your components are correct. Send a pic of your file tree so we could see as well

[open juniper]

I think the paths are correct since components folder is in the same src folder as App.jsx.

ahh I figured it out. It wasn't liking my h3 tags in between my image tags.

ty!

[alpine cairn]

are you making a flash card app?

[open juniper]

yes!

[alpine cairn]

thats awesome. Im thinking about doing the same as well. Id love to see your end result.

[clear wing]

image elements cannot have children. It's just invalid html since you can't write <img></img>

[open juniper]

Sure! I'd be happy to share it once it's done. The logic for it is pretty straightforward but I'm experiencing some issues with the csv import to get it functioning correctly. Are you familiar with importing csv files into React?