Hello, I have an index.ts files that includes all my page layouts and looks like this

import dynamic from 'next/dynamic.js';

export const layouts = {
    DefaultPageLayout: dynamic(() => import('./DefaultPageLayout.js').then(m => m.DefaultPageLayout)),
};

and the output build of the DefaultPageLayout looks like this:

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function DefaultPageLayout({ sections, children }) {
    console.log('log in layout');
    return (_jsxs("div", { className: "max-w-[1300px] mx-auto", children: [_jsx("header", { className: "pt-20", children: null }), children, _jsx("footer", { children: null })] }));
}

If I export the component directly without dynamic, it works, but if I use it like that with a dynamic, I get Invalid Hook Call and Cannot read properties of null (reading 'useContext')



This is a personal library that I create to use it as "theme" for my websites, previously the files were locally in the same project and worked with the dynamic function from Next, in the exact same structure

Now those are exported from my library, which is compiled only using tsc, no other bundler.

From what I can see, everything looks okay