Gatsby: Element type is invalid: expected a string (for built-in components) or a class/function

user_14096618 0
Viewed 468

This might sound duplicate as there are similar questions available but None of them really helped me so I am opening a new one.

I get this error when I try to run my gatsby project on localhost:8000/

Error

I tried everything that I found on Web (Changing my Export methods, using Curly brackets while import etc.) but nothing changed. The Error was same. I tried to re run the project also.

Here is my layout.js

import React, { useEffect } from 'react'
import Header from '../navigation/header'
import Footer from '../navigation/footer'
import * as layoutStyles from './layout.module.scss'
import { StylesProvider } from '@material-ui/core/styles';
import AOS from "aos";
import "aos/dist/aos.css";


const Layout = (props) => {

  useEffect(() => {
    AOS.init({
      duration: 750,
      offset: -20
    });
  }, []);

  return (
    <StylesProvider injectFirst>
      <div>
        <Header />
        <div className={layoutStyles.container}>
          {props.children}
        </div>
        <Footer />
      </div>
    </StylesProvider>
  )
}

export default Layout

And I am importing it in Home.js Which is as follows:

import React from 'react'
import Layout from "../components/main/layout"

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>Hello world!!</h1>
      </div>
    </Layout>
  )
}

I don't where am I wrong? I changed eports methods to functional export and named export but it didn't worked.

gatsby reactjs export module
1 Answers

I don't where am I wrong? I changed eports methods to functional export and named export but it didn't worked.

This issue is 90% time related to how components are defined and exported, not on the type of the component. Check them all, the ones in your <Layout> to identify which ones are causing the issue. A component that is not exported as default, must be imported like:

import { NonDefaultComponent } from './some/path';

On the other hand, when a component is exported as default you just need to:

import DefaultComponent  from './some/path';

Check also the naming, the paths, the capitalization, etc.

To identify the wrong component, it can be useful to comment/uncomment each one.

user_55853710
Related