Gatsby：元素类型无效：应为字符串（对于内置组件）或类/函数

Question

这可能听起来很重复，因为有类似的问题可用，但它们都没有真正帮助过我，所以我开了一个新的。

当我尝试在 localhost:8000/ 上运行我的 gatsby 项目时出现此错误

我尝试了在 Web 上找到的所有内容（更改导出方法、导入时使用大括号等），但没有任何改变。错误是一样的。我也尝试重新运行该项目。

这是我的 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

我在 Home.js 中导入它，如下所示：

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

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

我不知道我错在哪里？我将 eports 方法更改为功能导出和命名导出，但没有奏效。

Answer 1

<块引用>

我不知道我错在哪里？我将 eports 方法更改为函数式 导出并命名导出，但没有奏效。

这个问题有 90% 的时间与如何定义和导出组件有关，而不是与组件的类型有关。检查所有这些，即 <Layout> 中的那些，以确定导致问题的原因。一个没有默认导出的组件，必须像这样导入：

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

另一方面，当组件默认导出时，您只需要：

import DefaultComponent  from './some/path';

还要检查命名、路径、大小写等。

要识别错误的组件，对每个组件进行注释/取消注释会很有用。