我有两个Next.js 13项目:首页和管理面板,我想公开整个管理面板(即.e _app.tsx)并将其加载到Homepage中。我已经在各自的next.config.js文件中使用@module-federation/nextjs-mf配置了这两个项目。但是,当我试图将应用页面从管理面板导入Homepage时,我得到一个错误,指出元素类型无效。下面是错误消息:
Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `MyApp`.
字符串
这是我在next.js.js中对管理面板的配置
webpack: (config, options) => {
const { isServer } = options;
config.plugins.push(
new NextFederationPlugin({
name: "admin",
remotes: {
homepage: `homepage@http://localhost:3000/_next/static/${
isServer ? "ssr" : "chunks"
}/remoteEntry.js`,
},
exposes: {
"./submitButton": "./component/UI/Buttons/SubmitButton/SubmitButton.tsx",
"./app": "./pages/_app.tsx",
},
filename: "static/chunks/remoteEntry.js",
extraOptions: {
exposePages: true,
},
})
);
return config;
}
型
我尝试使用模块联合暴露整个Admin Panel项目(_app.tsx)并将其加载到Homepage项目中。我希望能够将应用程序页面从Admin Panel导入Homepage而不会出现任何问题。然而,当我尝试这样做时,我得到了错误。
是否可以使用模块联合来暴露_app.tsx?如果可以,是什么导致了这个错误?如果不可以,有什么替代方法?
1条答案
按热度按时间fivyi3re1#
要暴露页面,您不需要指定文件名,只需指定路由本身并将exposePages设置为true。试试这个,它在nextjs 14中为我工作
字符串