Cuando uso el siguiente código, tengo el error
Error: The default export is not a React Component in page: "/"páginas/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);ConToast.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;Deberías llamar al Component envuelto así:
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> ); }o así:
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> ); }O básicamente está tratando de representar un objeto de función en JSX como un niño, y eso genera una excepción. Los nombres HOC no deben comenzar con un carácter en mayúsculas.
Ese error de NextJS solo debería deberse al hecho de que tuvo ese error que no se detectó durante el procesamiento de SS.