CODEWITHSUNDEEP
javascriptreactjs
newcoder
newcoder

Reputation: 51

React: Element type is invalid

Bootcamp student here. I am working on a little personal project for fun but I keep encountering this error. I've checked my import and exports for these files and everything looks correct. What else could possibly be causing this error?

Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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.

App.js file 
import "./styles.css";
import React from 'react'
import { Main } from './main.js'

export default function App() {
  return (
    <div className="App">
      </Main>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

entire project here. My goal for the project is commented in app.js

Upvotes: 1

Views: 39

Answers (1)

Michael Mano
Michael Mano

Reputation: 3440

The fix is the way you are importing main, import Main from './main.js' as you are exporting it as a default. you are not exporting an object

App.js file 
import "./styles.css";
import React from 'react'
import Main from './main.js'

export default function App() {
  return (
    <div className="App">
      <Main/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

You may also need to add a render method to your Main class.

import { Component } from "react";
import SUBJECT from "./subject";
import GENRE from "./genre";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: SUBJECT,
      genre: GENRE
    };
  }
  render() {
    return null;
  };
}

export default Main;

Upvotes: 1

Related Questions