fix: override watchOptions.ignored if the modernjs internal value is regexp (#3291)

Author: 2heal1

.changeset/beige-terms-check.md

@@ -2,4 +2,4 @@
 '@module-federation/modern-js': patch
 ---
 
-fix: print warn if user set watchOptions.ignored value as regexp type
+fix: override watchOptions.ignored if the modernjs internal value is regexp

.changeset/fuzzy-dots-beam.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/modern-js': patch
+---
+
+chore: no auto add watchOptions.ignored

apps/modernjs-ssr/host/modern.config.ts

@@ -14,6 +14,5 @@ export default defineConfig({
       mode: 'stream',
     },
   },
-
   plugins: [appTools(), moduleFederationPlugin()],
 });

apps/website-new/docs/en/guide/basic/type-prompt.mdx

@@ -40,6 +40,10 @@ After modifying the producer code, the consumer will automatically pull the prod
 
 ### Federation Runtime API type prompt
 
+:::info
+If the builder is `webpack`, you also need to add `**/@mf-types/**` to [watchOptions.ignored](https://webpack.js.org/configuration/watch/#watchoptionsignored) to avoid Circular compilation issues caused by type updates
+:::
+
 It needs to add `./@mf-types/*` in the `include` field to enjoy `Federation Runtime` `loadRemote` type hints and type hot reloading
 
 ```json title="tsconfig.json"

apps/website-new/docs/zh/guide/basic/type-prompt.mdx

@@ -40,6 +40,10 @@
 
 ### Federation Runtime API 类型提示
 
+:::info
+如果构建器为 `webpack` ，还需要再 [watchOptions.ignored](https://webpack.js.org/configuration/watch/#watchoptionsignored) 增加 `**/@mf-types/**`，以避免类型更新导致的循环编译问题
+:::
+
 需要在 `include` 字段增加 `./@mf-types/*` 以享有 `Federation Runtime` `loadRemote` 类型提示以及类型热重载
 
 ```json title="tsconfig.json"

packages/modernjs/src/cli/configPlugin.ts

@@ -12,6 +12,7 @@ import {
   getIPV4,
   getMFConfig,
   patchMFConfig,
+  addMyTypes2Ignored,
 } from './utils';
 import { moduleFederationPlugin } from '@module-federation/sdk';
 
@@ -83,6 +84,9 @@ export const moduleFederationConfigPlugin = (
 
         return {
           tools: {
+            bundlerChain(chain, { isServer }) {
+              addMyTypes2Ignored(chain, isServer ? ssrConfig : csrConfig);
+            },
             rspack(config, { isServer }) {
               modifyBundlerConfig({
                 bundlerType,

packages/modernjs/src/cli/utils.spec.ts

@@ -1,12 +1,5 @@
 import { it, expect, describe } from 'vitest';
-import path from 'path';
-import { BundlerConfig } from '../interfaces/bundler';
-import {
-  patchMFConfig,
-  patchBundlerConfig,
-  getIPV4,
-  patchIgnoreWarning,
-} from './utils';
+import { patchMFConfig, patchBundlerConfig, getIPV4 } from './utils';
 
 const mfConfig = {
   name: 'host',
@@ -117,9 +110,6 @@ describe('patchBundlerConfig', async () => {
         publicPath: 'auto',
         uniqueName: 'host',
       },
-      watchOptions: {
-        ignored: ['**/@mf-types/**'],
-      },
     };
     // @ts-ignore temp ignore
 
@@ -154,9 +144,6 @@ describe('patchBundlerConfig', async () => {
         publicPath: 'auto',
         uniqueName: 'host',
       },
-      watchOptions: {
-        ignored: ['**/@mf-types/**'],
-      },
     };
     // @ts-ignore temp ignore
     delete bundlerConfig?.ignoreWarnings;

packages/modernjs/src/cli/utils.ts

@@ -1,18 +1,19 @@
+import os from 'os';
+import path from 'path';
+import { moduleFederationPlugin, encodeName } from '@module-federation/sdk';
+import { bundle } from '@modern-js/node-bundle-require';
+import { PluginOptions } from '../types';
+import { LOCALHOST, PLUGIN_IDENTIFIER } from '../constant';
+import logger from './logger';
+
+import type { BundlerConfig, BundlerChainConfig } from '../interfaces/bundler';
 import type {
   webpack,
   UserConfig,
   AppTools,
   Rspack,
   Bundler,
 } from '@modern-js/app-tools';
-import { moduleFederationPlugin, encodeName } from '@module-federation/sdk';
-import path from 'path';
-import os from 'os';
-import { bundle } from '@modern-js/node-bundle-require';
-import { PluginOptions } from '../types';
-import { LOCALHOST, PLUGIN_IDENTIFIER } from '../constant';
-import { BundlerConfig } from '../interfaces/bundler';
-import logger from './logger';
 
 const defaultPath = path.resolve(process.cwd(), 'module-federation.config.ts');
 const isDev = process.env.NODE_ENV === 'development';
@@ -222,6 +223,59 @@ export function patchIgnoreWarning<T extends Bundler>(
     return false;
   });
 }
+
+export function addMyTypes2Ignored(
+  chain: BundlerChainConfig,
+  mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions,
+) {
+  const watchOptions = chain.get(
+    'watchOptions',
+  ) as webpack.Configuration['watchOptions'];
+  if (!watchOptions || !watchOptions.ignored) {
+    chain.watchOptions({
+      ignored: /[\\/](?:\.git|node_modules|@mf-types)[\\/]/,
+    });
+    return;
+  }
+  const ignored = watchOptions.ignored;
+  const DEFAULT_IGNORED_GLOB = '**/@mf-types/**';
+
+  if (Array.isArray(ignored)) {
+    if (
+      mfConfig.dts !== false &&
+      typeof mfConfig.dts === 'object' &&
+      typeof mfConfig.dts.consumeTypes === 'object' &&
+      mfConfig.dts.consumeTypes.remoteTypesFolder
+    ) {
+      chain.watchOptions({
+        ...watchOptions,
+        ignored: ignored.concat(
+          `**/${mfConfig.dts.consumeTypes.remoteTypesFolder}/**`,
+        ),
+      });
+    } else {
+      chain.watchOptions({
+        ...watchOptions,
+        ignored: ignored.concat(DEFAULT_IGNORED_GLOB),
+      });
+    }
+
+    return;
+  }
+
+  if (typeof ignored !== 'string') {
+    chain.watchOptions({
+      ...watchOptions,
+      ignored: /[\\/](?:\.git|node_modules|@mf-types)[\\/]/,
+    });
+    return;
+  }
+
+  chain.watchOptions({
+    ...watchOptions,
+    ignored: ignored.concat(DEFAULT_IGNORED_GLOB),
+  });
+}
 export function patchBundlerConfig<T extends Bundler>(options: {
   bundlerConfig: BundlerConfig<T>;
   isServer: boolean;
@@ -237,43 +291,6 @@ export function patchBundlerConfig<T extends Bundler>(options: {
 
   patchIgnoreWarning(bundlerConfig);
 
-  if (bundlerType === 'webpack') {
-    bundlerConfig.watchOptions = bundlerConfig.watchOptions || {};
-    if (!Array.isArray(bundlerConfig.watchOptions.ignored)) {
-      if (bundlerConfig.watchOptions.ignored) {
-        if (typeof bundlerConfig.watchOptions.ignored !== 'string') {
-          logger.warn(
-            `Detect you have set watchOptions.ignore as regexp, please transform it to glob string array and add "**/@mf-types/**" to the array.`,
-          );
-        } else {
-          bundlerConfig.watchOptions.ignored = [
-            bundlerConfig.watchOptions.ignored,
-          ];
-        }
-      } else {
-        bundlerConfig.watchOptions.ignored = [];
-      }
-    }
-
-    if (Array.isArray(bundlerConfig.watchOptions.ignored)) {
-      if (mfConfig.dts !== false) {
-        if (
-          typeof mfConfig.dts === 'object' &&
-          typeof mfConfig.dts.consumeTypes === 'object' &&
-          mfConfig.dts.consumeTypes.remoteTypesFolder
-        ) {
-          bundlerConfig.watchOptions.ignored.push(
-            `**/${mfConfig.dts.consumeTypes.remoteTypesFolder}/**`,
-          );
-        } else {
-          bundlerConfig.watchOptions.ignored.push('**/@mf-types/**');
-        }
-      } else {
-        bundlerConfig.watchOptions.ignored.push('**/@mf-types/**');
-      }
-    }
-  }
-
   if (bundlerConfig.output) {
     if (!bundlerConfig.output?.chunkLoadingGlobal) {
       bundlerConfig.output.chunkLoadingGlobal = `chunk_${mfConfig.name}`;

packages/modernjs/src/interfaces/bundler.ts

@@ -1,4 +1,4 @@
-import type { AppTools, Bundler } from '@modern-js/app-tools';
+import type { AppTools, Bundler, UserConfig } from '@modern-js/app-tools';
 
 type AppToolsUserConfig<T extends Bundler> = AppTools<T>['userConfig']['tools'];
 
@@ -21,6 +21,14 @@ type RspackConfigs =
     : never;
 type ObjectRspack = ExtractObjectType<OmitArrayConfiguration<RspackConfigs>>;
 
+type BundlerChain = ExcludeUndefined<
+  ExcludeUndefined<UserConfig<AppTools>['tools']>['bundlerChain']
+>;
+
+type BundlerChainFunc = Extract<BundlerChain, (chain: any, utils: any) => any>;
+
+export type BundlerChainConfig = Parameters<BundlerChainFunc>[0];
+
 export type BundlerConfig<T extends Bundler> = T extends 'rspack'
   ? ObjectRspack
   : ObjectWebpack;