默认导出不是页面中的 React 组件："/" NextJS答案

【问题标题】：The default export is not a React Component in page: "/" NextJS默认导出不是页面中的 React 组件："/" NextJS
【发布时间】：2020-01-23 07:46:40
【问题描述】：

不确定为什么会出现错误，这是我的 index.js 和 App.js（默认导出）。我在 app.js 中使用了导出默认值。

index.js：

import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
<App />;

App.js

import React, { Component } from "react";
import { ToastContainer } from "react-toastify";
import NavBar from "../components/navBar";
import auth from "../services/authService";
import "react-toastify/dist/ReactToastify.css";
import "./App.css";

class App extends Component {
  state = {};

  componentDidMount() {
    const user = auth.getCurrentUser();
    this.setState({ user });
  }

  render() {
    const { user } = this.state;

    return (
      <React.Fragment>
        <ToastContainer />
        <NavBar user={user} />
      </React.Fragment>
    );
  }
}

export default App;

【问题讨论】：

我猜你的 index.js 是错误的。您可以分享存储库链接或有关您如何使用 index.js 文件的更多详细信息吗？
这就是 index.js 的全部用途。
我已经修复了，只需要将index的内容放到一个类中导出即可。

标签： reactjs next.js

【解决方案1】：

日期：23/01/2021

我的Next.js 应用程序也遇到过这个问题。

如果您使用的是功能组件而不是类组件，在某些情况下也会出现此错误。完全不知道为什么会这样，但我刚刚通过页面底部的exporting 我的组件解决了这个问题。

这样，

案例错误场景：

export default function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

Error: The default export is not a React Component in page: "/"

如何解决？

我只是把我的导出放在我的页面底部，然后它就会消失。

这样，

function Home(){
      return (<>some stuffs</>)
}

Home.getInitialProps = async (ctx) => {
    return {}
}

export default Home;

希望对您有所帮助！

【讨论】：

【解决方案2】：

已修复，将 index.js 设为类并导出。

import React, { Component } from "react";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
class Index extends Component {
  state = {};
  render() {
    return <App />;
  }
}

export default Index;

【讨论】：

【解决方案3】：

对我来说，这只是因为我有一个 .ts 而不是 .tsx 文件。它可能对 .js 而不是 .jsx 扩展名做同样的事情。

【讨论】：

【解决方案4】：

如果您在服务器端渲染期间在初始页面渲染之前抛出错误而未捕获它，也会发生这种情况。举个例子：

const Component = (props) => {
  return (
    <div {...props}>
       hello!
    </div>
  );
};

Component.getInitialProps = async ({ query, req, asPath }) => {
  throw new Error('Application is crashing without catch');
}

确保在呈现页面之前发现意外错误。

【讨论】：