Nextjs微型前端
Nextjs微型前端
提问于 2022-08-09 10:12:34
我使用nx.dev来维护monorepo，我的项目要求使用Nextjs进行MFE。在@module-federation/nextjs-mf之后，它说它被移动到付费插件，但我还是想要一些开放代码的解决方案(没有@module-federation/nextjs-mf插件)。我试图为生成ModuleFedration文件的remoteEntry配置webpack属性。但它仍然没有进入我的浏览器网络呼叫。我怎样才能让公众访问它？
我试图为webpack改变publicPath，但还是一样。
next.config.js
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
/**
* @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
distDir: 'build',
webpack:(config, options) =>{
config.plugins.push(
new options.webpack.container.ModuleFederationPlugin({
name:"fe2",
filename:'remoteEntry_2.js',
remoteType:"var",
exposes:{
"./remote2":"./components/hello.tsx"
},
shared:[
{
react: {
eager: true,
singleton: true,
requiredVersion: false,
}
},
{
"react-dom": {
eager: true,
singleton: true,
requiredVersion: false,
}
}
]
})
)
return {
output: {
...config.output,
publicPath: 'http://localhost:4002/',
},
...config
};
}
};
module.exports = withNx(nextConfig);remoteEntry正在生成于build 中。
RemoteEntry不在浏览器的网络中
回答 1
Stack Overflow用户
发布于 2022-08-10 19:13:55
我和你有一点相同，我不明白为什么它没有出现在网络上。
运行nextjs应用程序时，不能访问直接在构建文件夹输出上的静态文件，必须将它们放在输出文件夹的静态文件夹中(这就是我的结论)。
在这里，nextjs吐露的样子如何？
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
productionBrowserSourceMaps: true,
distDir: 'build',
webpack: (config, context) => {
return {
...config,
experiments: {
...config.experiments,
topLevelAwait: true,
},
plugins: config.plugins.concat(
new context.webpack.container.ModuleFederationPlugin({
name: 'microfrontend',
filename: 'static/chunks/remotes.js', // this is where the magic happen
remoteType: 'var',
exposes: {
// expose all component here.
'./component1': path.resolve(process.cwd(), './src/components/component1'),
'./component2': path.resolve(process.cwd(), './src/components/component2'),
},
shared: {
react: {
singleton: true,
strictVersion: true,
eager: true,
requiredVersion: dependencies.react,
},
'react-dom': {
singleton: true,
strictVersion: true,
eager: true,
requiredVersion: dependencies['react-dom'],
},
...deps, // coming from a script outside
},
}),
),
};
},
};在我的主机应用程序中，我可以以${process.env.REMOTE_URL}/static/chunks/remotes.js为目标。
我仍然存在一些问题，但它似乎与我的遥控器及其依赖项有关。
我希望这能帮点忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73290086
复制相关文章
相似问题
腾讯云开发者
