diff --git a/.changeset/sour-carpets-walk.md b/.changeset/sour-carpets-walk.md new file mode 100644 index 00000000000..becbc9cb025 --- /dev/null +++ b/.changeset/sour-carpets-walk.md @@ -0,0 +1,5 @@ +--- +'@module-federation/modern-js': patch +--- + +chore(modern-js-plugin): add ssr option diff --git a/apps/website-new/docs/en/configure/shared.mdx b/apps/website-new/docs/en/configure/shared.mdx index 4a2ad2e2d31..9be6d34233a 100644 --- a/apps/website-new/docs/en/configure/shared.mdx +++ b/apps/website-new/docs/en/configure/shared.mdx @@ -44,7 +44,7 @@ new ModuleFederationPlugin({ - Type: `boolean` - Required: No -- Default: `true` +- Default: `false` Whether to allow only one version of the shared module within the shared scope (singleton mode). diff --git a/apps/website-new/docs/en/guide/framework/modernjs.mdx b/apps/website-new/docs/en/guide/framework/modernjs.mdx index 0ae14dbdc5d..1bc28b2fd79 100644 --- a/apps/website-new/docs/en/guide/framework/modernjs.mdx +++ b/apps/website-new/docs/en/guide/framework/modernjs.mdx @@ -169,3 +169,39 @@ Set module loading status. A fault-tolerant component that is rendered when the component fails to **load** or **render**. Note: This component only renders this fault-tolerant component on the client side when **rendering** fails. + +## Configuration + +### ssr + +- Type: `false` +- Is it required: No +- Default value: `undefined` + +`@module-federation/modern-js` will automatically add SSR related build presets based on `server.ssr` in modern.js config. + +If the current project only needs to load MF in the CSR, you can set `ssr: false` to help progressive migration. + +```title='modern.config.ts' +import { appTools, defineConfig } from '@modern-js/app-tools'; +import { moduleFederationPlugin } from '@module-federation/modern-js'; + +// https://modernjs.dev/en/configure/app/usage +export default defineConfig({ + dev: { + port: 3050, + }, + runtime: { + router: true, + }, + server: { + ssr: { + mode: 'stream', + }, + }, + plugins: [ + appTools(), + moduleFederationPlugin({ ssr: false }) + ], +}); +``` diff --git a/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx new file mode 100644 index 00000000000..a96cb6d655b --- /dev/null +++ b/apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-008.mdx @@ -0,0 +1,12 @@ +import ErrorCodeTitle from '@components/ErrorCodeTitle'; + + + +## Reasons + +Failed to load resource during the runtime process, which may be caused by network instability leading to resource loading timeout failure, or resource address error leading to resource loading failure. + + +## Solutions + +check whether the resource address is correct. If the resource address is correct, check whether the network is stable. If the network is unstable, you can add the retry mechanism, refer to [Runtime Retry Mechanism](en/plugin/plugins/retry-plugin.html). \ No newline at end of file diff --git a/apps/website-new/docs/zh/configure/shared.mdx b/apps/website-new/docs/zh/configure/shared.mdx index da1dd1ce37d..b2aebb33d4d 100644 --- a/apps/website-new/docs/zh/configure/shared.mdx +++ b/apps/website-new/docs/zh/configure/shared.mdx @@ -44,13 +44,13 @@ new ModuleFederationPlugin({ - 类型:`boolean` - 是否必填:否 -- 默认值:`true` +- 默认值:`false` 是否在共享作用域中只允许共享模块的一个版本 (单例模式). - 如果值为 true,开启单例模式;值为 false,不开启单例模式。 -- 如果启用单例模式,那么 remote 应用组件和 host 应用共享的依赖只加载一次,当版本不一致时加载更高的版本。此时对于版本更低的那一方会给出警告: -- 不开启单例模式下,如果 remote 应用和 host 应用共享依赖的版本不一致,则 remote 应用和 host 应用加载各自的依赖 +- 如果启用单例模式,那么 remote 应用组件和 host 应用共享的依赖只加载一次,当版本不一致时加载更高的版本。此时对于版本更低的那一方会给出警告。 +- 不开启单例模式下,如果 remote 应用和 host 应用共享依赖的版本不一致,则 remote 应用和 host 应用加载各自的依赖。 ## requiredVersion @@ -61,7 +61,7 @@ new ModuleFederationPlugin({ 所需版本,可以是一个版本区间。默认值为当前应用的依赖版本。 - 在使用共享依赖时,会判断该依赖版本是否大于等于 requiredVersion ,如果是则会正常使用。如果小于 requiredVersion 那么会在控制台警告,并使用当前共享依赖中最小的版本。 -- 当一方设置 requiredVersion ,另一方设置 singleton 时,会加载 requiredVersion 的依赖,singleton 方直接使用 requiredVersion 的依赖,不论版本高低 +- 当一方设置 requiredVersion ,另一方设置 singleton 时,会加载 requiredVersion 的依赖,singleton 方直接使用 requiredVersion 的依赖,不论版本高低。 ## eager @@ -121,13 +121,13 @@ new ModuleFederationPlugin({ ```ts new ModuleFederationPlugin({ name: '@demo/button', - shared: { - react: { - singleton: true, - requiredVersion: '~18.2.0' - fixedDependencies: true - } + shared: { + react: { + singleton: true, + requiredVersion: '~18.2.0', + fixedDependencies: true } + }, //... }); ``` diff --git a/apps/website-new/docs/zh/guide/framework/modernjs.mdx b/apps/website-new/docs/zh/guide/framework/modernjs.mdx index ff7dc321ba2..6196b671537 100644 --- a/apps/website-new/docs/zh/guide/framework/modernjs.mdx +++ b/apps/website-new/docs/zh/guide/framework/modernjs.mdx @@ -180,3 +180,39 @@ export default Product; 当组件**加载**或**渲染**失败时,所渲染的容错组件。 注意:当**渲染**失败的时候,该组件仅在客户端渲染此 容错组件。 + +## 配置 + +### ssr + +- 类型:`false` +- 是否必填:否 +- 默认值:`undefined` + +`@module-federation/modern-js` 会根据 modern.js config 中的 `server.ssr` 来自动添加 SSR 相关的构建预设。 + +如果当前项目仅需要在 CSR 加载 MF ,那么可以设置 `ssr: false` 来帮助渐进式迁移。 + +```title='modern.config.ts' +import { appTools, defineConfig } from '@modern-js/app-tools'; +import { moduleFederationPlugin } from '@module-federation/modern-js'; + +// https://modernjs.dev/en/configure/app/usage +export default defineConfig({ + dev: { + port: 3050, + }, + runtime: { + router: true, + }, + server: { + ssr: { + mode: 'stream', + }, + }, + plugins: [ + appTools(), + moduleFederationPlugin({ ssr: false }) + ], +}); +``` diff --git a/apps/website-new/docs/zh/guide/troubleshooting/runtime/RUNTIME-008.mdx b/apps/website-new/docs/zh/guide/troubleshooting/runtime/RUNTIME-008.mdx new file mode 100644 index 00000000000..a265fa4924f --- /dev/null +++ b/apps/website-new/docs/zh/guide/troubleshooting/runtime/RUNTIME-008.mdx @@ -0,0 +1,13 @@ +import ErrorCodeTitle from '@components/ErrorCodeTitle'; + + + +## 原因 + +Runtime 运行时资源加载失败报错,可能原因为网络不稳定导致资源加载超时失败,或者为资源地址错误导致资源加载失败。 + + +## 解决方法 + +检查资源地址是否正确,若资源地址正确,检查网络是否稳定。网络不稳定时可增加重试机制,参考 [Runtime 重试机制](zh/plugin/plugins/retry-plugin.html)。 + \ No newline at end of file diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts index c0ee0dbd693..bc54580a0c3 100644 --- a/packages/modernjs/src/cli/configPlugin.ts +++ b/packages/modernjs/src/cli/configPlugin.ts @@ -72,7 +72,10 @@ export const moduleFederationConfigPlugin = ( const bundlerType = useAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack'; const ipv4 = getIPV4(); - const enableSSR = Boolean(modernjsConfig?.server?.ssr); + const enableSSR = + userConfig.userConfig?.ssr === false + ? false + : Boolean(modernjsConfig?.server?.ssr); if (userConfig.remoteIpStrategy === undefined) { if (!enableSSR) { diff --git a/packages/modernjs/src/cli/index.ts b/packages/modernjs/src/cli/index.ts index f7c9c958265..7701c3db4eb 100644 --- a/packages/modernjs/src/cli/index.ts +++ b/packages/modernjs/src/cli/index.ts @@ -21,6 +21,7 @@ export const moduleFederationPlugin = ( distOutputDir: '', originPluginOptions: userConfig, remoteIpStrategy: userConfig?.remoteIpStrategy, + userConfig, }; return { name: '@modern-js/plugin-module-federation', diff --git a/packages/modernjs/src/cli/ssrPlugin.ts b/packages/modernjs/src/cli/ssrPlugin.ts index 7da73ebebff..59a1aa8617c 100644 --- a/packages/modernjs/src/cli/ssrPlugin.ts +++ b/packages/modernjs/src/cli/ssrPlugin.ts @@ -15,7 +15,7 @@ export function setEnv() { } export const moduleFederationSSRPlugin = ( - userConfig: Required, + pluginOptions: Required, ): CliPlugin => ({ name: '@modern-js/plugin-module-federation-ssr', pre: [ @@ -25,7 +25,7 @@ export const moduleFederationSSRPlugin = ( setup: async ({ useConfigContext, useAppContext }) => { const modernjsConfig = useConfigContext(); const enableSSR = Boolean(modernjsConfig?.server?.ssr); - if (!enableSSR) { + if (!enableSSR || pluginOptions.userConfig?.ssr === false) { return {}; } @@ -50,32 +50,32 @@ export const moduleFederationSSRPlugin = ( // throw new Error( // `${PLUGIN_IDENTIFIER} Not support rspack ssr mode yet !`, // ); - if (!userConfig.nodePlugin) { - userConfig.nodePlugin = new RspackModuleFederationPlugin( - userConfig.ssrConfig, + if (!pluginOptions.nodePlugin) { + pluginOptions.nodePlugin = new RspackModuleFederationPlugin( + pluginOptions.ssrConfig, ); // @ts-ignore - config.plugins?.push(userConfig.nodePlugin); + config.plugins?.push(pluginOptions.nodePlugin); } } else { - userConfig.distOutputDir = - userConfig.distOutputDir || + pluginOptions.distOutputDir = + pluginOptions.distOutputDir || config.output?.path || path.resolve(process.cwd(), 'dist'); } }, webpack(config, { isServer }) { if (isServer) { - if (!userConfig.nodePlugin) { - userConfig.nodePlugin = new ModuleFederationPlugin( - userConfig.ssrConfig, + if (!pluginOptions.nodePlugin) { + pluginOptions.nodePlugin = new ModuleFederationPlugin( + pluginOptions.ssrConfig, ); // @ts-ignore - config.plugins?.push(userConfig.nodePlugin); + config.plugins?.push(pluginOptions.nodePlugin); } } else { - userConfig.distOutputDir = - userConfig.distOutputDir || + pluginOptions.distOutputDir = + pluginOptions.distOutputDir || config.output?.path || path.resolve(process.cwd(), 'dist'); } @@ -133,11 +133,11 @@ export const moduleFederationSSRPlugin = ( }; }, afterBuild: () => { - const { nodePlugin, browserPlugin, distOutputDir } = userConfig; + const { nodePlugin, browserPlugin, distOutputDir } = pluginOptions; updateStatsAndManifest(nodePlugin, browserPlugin, distOutputDir); }, afterDev: () => { - const { nodePlugin, browserPlugin, distOutputDir } = userConfig; + const { nodePlugin, browserPlugin, distOutputDir } = pluginOptions; updateStatsAndManifest(nodePlugin, browserPlugin, distOutputDir); }, }; diff --git a/packages/modernjs/src/types/index.ts b/packages/modernjs/src/types/index.ts index b30fefa1b2b..b2830b54cd0 100644 --- a/packages/modernjs/src/types/index.ts +++ b/packages/modernjs/src/types/index.ts @@ -5,6 +5,7 @@ import type { ModuleFederationPlugin as RspackModuleFederationPlugin } from '@mo export interface PluginOptions { config?: moduleFederationPlugin.ModuleFederationPluginOptions; configPath?: string; + ssr?: false; remoteIpStrategy?: 'ipv4' | 'inherit'; } @@ -16,7 +17,9 @@ export interface InternalModernPluginOptions { browserPlugin?: BundlerPlugin; nodePlugin?: BundlerPlugin; remoteIpStrategy?: 'ipv4' | 'inherit'; + userConfig?: PluginOptions; } + export type BundlerPlugin = | WebpackModuleFederationPlugin | RspackModuleFederationPlugin;