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;
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.