CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
CCCC
CCCC

Reputation: 6471

next js - how to create hoc for the page

When I use the code below, I've got the error

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

pages/index.tsx

import React, { useState, useRef } from "react";
import type { NextPage } from "next";
import WithToast from "hoc/WithToast/WithToast";

const Home: NextPage = () => {
  return (
      <div>
        Home
      </div>
  );
};

export default WithToast(Home);

WithToast.tsx

import React from "react";
import { ToastContainer, Zoom } from "react-toastify";
import { NextComponentType, NextPageContext } from "next";

function WithToast(Component: NextComponentType<NextPageContext, any, {}>) {
    return (
      <div className="with-toast">
        <ToastContainer
          transition={Zoom}
          position="top-center"
          autoClose={200}
          hideProgressBar={true}
          draggable={false}
          closeButton={false}
        />
        {Component}
      </div>
    );
}

export default WithToast;

Upvotes: 1

Views: 723

Answers (1)

Cesare Polonara
Cesare Polonara

Reputation: 3860

You should call the wrapped Component like this:

function withToast(Component: NextComponentType<NextPageContext, any, {}>) {
    return (
      <div className="with-toast">
        <ToastContainer
          transition={Zoom}
          position="top-center"
          autoClose={200}
          hideProgressBar={true}
          draggable={false}
          closeButton={false}
        />
        <Component />
      </div>
    );
}

or like this:

function withToast(component: NextComponentType<NextPageContext, any, {}>) {
    return (
      <div className="with-toast">
        <ToastContainer
          transition={Zoom}
          position="top-center"
          autoClose={200}
          hideProgressBar={true}
          draggable={false}
          closeButton={false}
        />
        {component()}
      </div>
    );
}

Or you are basically trying to render a function object in JSX as a child, and that throws an exception. The HOC names should not begin with a capital case character.

That NextJS error should just be due to the fact you had that error that was not catched during SS render.

Upvotes: 2

Related Questions