React doesn't recognize a component

JavaScript
1

Hello,
for some reason, my React code won’t compile. The error code I get says that the component is not defined inside itself. Here are the code and what I get as an error:

Main.js

import React from "react"
import {DataProvider} from "./Data"
import Item from "./Item"

function Main(){
    return(
        <main>
            <DataProvider>
                <Item />
            </DataProvider>
        </main>
        
    )
}

export default Main

src\Main.js
  Line 14:16:  'Main' is not defined  no-undeff

UPDATE: I solved this by myself, it turns out that <main> tag was causing issues so I replaced it with <div> and now it works just fine

2

I formatted the code in your update so we can see it. Remember to enclose code using backticks.

Anyway, sounds odd. I’m not sure why changing the element type would matter? But we really do not have enough of the code to know the exact context.

1 Like
3

I don’t know either, but it did the job.
I pasted all the code I had in my Main.js component there.

4

The error message doesn’t seem like something you would get from issues in the JSX.

Looking at the line numbers it looks like the export is triggering it and the no-undef is specifically pointing to the identifier Main as the issue. Sometimes restarting create-react-app can fix oddities.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.