React.createElement expected string problem

Question

I was just learning React fundamentals and then I got this problem:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of App.

I looked at everything and I don't know if I got something wrong there because I can't see any errors at all. Saw some problems like this but couldn't solve my own one :D here is some code

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />,document.getElementById('root'));

app.js:

import React from "react";
import Footer from "./components/Footer";
import MainContent from "./components/MainContent";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div>
      <Navbar />
      <MainContent />
      <Footer />
    </div>
  )
}


export default App

Navbar.js:

import React from 'react';

function Navbar() {
    return (
        <nav>This is a Navbar</nav>
    )
}

export default Navbar

MainContent.js:

import React from 'react';

function MainContent() {
    return (
        <main>This is a footer</main>
    )
}

export default MainContent

Footer.js:

import React from 'react';

function Footer() {
    return (
        <footer>This is a footer</footer>
    )
}

export default Footer

Does this help you? https://stackoverflow.com/a/48551468 it doesn’t seem like you have problems from what you shared but maybe there are things we can’t see that are making problems. — Yehuda Makarov, Nov 18 '20 at 14:50
I'm guessing it's the mixed case in your import vs filename for `app`. — azium, Nov 18 '20 at 14:55
I created a react project with your code, It's working fine. https://codesandbox.io/s/pedantic-noyce-3g4r8?file=/src/App.js — BadPiggie, Nov 18 '20 at 14:58

score 0 · Answer 1 · answered Nov 18 '20 at 14:47

0

is it because you're importing from the file App.js (capitalized) but the file is called app.js (no caps) ?

answered Nov 18 '20 at 14:47

azium

20,056
7
57
79

If this is the issue, we should put a comment and mark it as a Typographical question. Your point maybe valid but is does not answer anything. Its more of a comment at this point of time – Rajesh Nov 18 '20 at 14:49
It seems very unlikely since the error says "check the render method of App". That would make it seem like `App` is imported and used correctly, but one of it's children is not. – Brian Thompson Nov 18 '20 at 15:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/27648558) – Dragonthoughts Nov 18 '20 at 15:09
@BrianThompson yeah I thought that as well, but it wouldn't surprise me if this was indeed the issue--my original suggestion was to rebuild everything, maybe something got stuck while code changes were being made – azium Nov 18 '20 at 15:14
@Dragonthoughts I believe this could be the answer, so I'm sticking to my guns here. – azium Nov 18 '20 at 15:14
The OP's code works in codesandbox: https://codesandbox.io/s/blissful-bush-qkbi8?fontsize=14&hidenavigation=1&theme=dark (minus changing MainContent render text content to match), so I agree with the answer that this is a typo somewhere. – AnilRedshift Nov 24 '20 at 17:52

score 0 · Answer 2 · answered Nov 18 '20 at 14:52

0

This may not be the issue: but have you tried changing <footer>, <nav>, and <main> to just <div>?

answered Nov 18 '20 at 14:52

Jon

622
8
29

1

Those are just basic HTML Tags. – BadPiggie Nov 18 '20 at 14:53
No I didn't, Well I don't think that we'll be a problem but I'll try – uski9992 Nov 18 '20 at 14:54

React.createElement expected string problem

2 Answers2