Vite模块联邦：remote_app/ModuleA导入解析失败的解决咨询

我当前的Vite配置代码如下：

import federation from '@originjs/vite-plugin-federation';
import react from '@vitejs/plugin-react-swc';
import dns from 'dns';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import env from 'vite-plugin-env-compatible';
import svgr from 'vite-plugin-svgr';
import pkg from './package.json';

dns.setDefaultResultOrder('verbatim');

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react(),
      svgr(),
      env({ prefix: 'REACT_APP' }),
      splitVendorChunkPlugin(),
      federation({
        name: 'ad-host',
        filename: 'remoteEntry.js',
        exposes: {
          './components/BasePaper': './src/components/BasePaper',
        },
        remotes: {
          main: 'http://localhost:3001/assets/remoteEntry.js',
          remote_app: 'http://localhost:4001/assets/remoteEntry.js',
        },
        shared: {
          ...Object.entries(pkg.dependencies).reduce((acc, [key, version]) => {
            acc[key] = {
              requiredVersion: version,
            };
            return acc;
          }, {}),
        },
      }),
    ],
    server: {
      port: 3001,
      host: true,
    },
    preview: {
      port: 3001,
    },
    build: {
      outDir: 'build',
      rollupOptions: {
        plugins: [
          visualizer({
            open: mode === 'dev',
            gzipSize: true,
            brotliSize: true,
          }),
        ],
      },
    },
    esbuild: {
      loader: 'jsx',
    },
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
        loader: {
          '.js': 'jsx',
        },
      },
    },
    resolve: {
      alias: {
        entries: [{ find: 'remote_app', replacement: 'remote_app' }],
        '~': path.resolve(__dirname, 'src'),
        components: path.resolve(__dirname, 'src/components'),
        utils: path.resolve(__dirname, 'src/utils'),
        containers: path.resolve(__dirname, 'src/containers'),
        images: path.resolve(__dirname, 'src/images'),
        media: path.resolve(__dirname, 'src/media'),
        hooks: path.resolve(__dirname, 'src/hooks'),
        styled: path.resolve(__dirname, 'src/styled'),
        appContext: path.resolve(__dirname, 'src/appContext'),
        'redux/store': path.resolve(__dirname, 'src/redux/store'),
        'redux/models/app': path.resolve(__dirname, 'src/redux/models/app'),
      },
    },
  };
});

在业务代码中我使用const ModuleA = React.lazy(() => import('remote_app/ModuleA'));导入模块，但始终出现Failed to resolve import "remote_app/ModuleA"错误。无论是否配置resolve alias都会触发该错误，不过移除整个resolve配置块后代码可正常运行，请问该如何配置resolve来解决此问题？

问题出在resolve.alias配置里的entries项——你添加了一个无意义的别名{ find: 'remote_app', replacement: 'remote_app' }，这会干扰Vite联邦插件对远程模块的解析逻辑。

修改步骤：

• 删除resolve.alias中的entries字段，不要给远程模块名设置任何别名
• 保留其他本地路径别名（比如~、components等），这些不会影响远程模块解析

修改后的resolve配置如下：

resolve: {
  alias: {
    '~': path.resolve(__dirname, 'src'),
    components: path.resolve(__dirname, 'src/components'),
    utils: path.resolve(__dirname, 'src/utils'),
    containers: path.resolve(__dirname, 'src/containers'),
    images: path.resolve(__dirname, 'src/images'),
    media: path.resolve(__dirname, 'src/media'),
    hooks: path.resolve(__dirname, 'src/hooks'),
    styled: path.resolve(__dirname, 'src/styled'),
    appContext: path.resolve(__dirname, 'src/appContext'),
    'redux/store': path.resolve(__dirname, 'src/redux/store'),
    'redux/models/app': path.resolve(__dirname, 'src/redux/models/app'),
  },
},

原理说明：
Vite联邦插件会接管远程模块（比如remote_app/*）的解析流程，如果你在别名里给远程模块名设置了匹配规则，会导致Vite优先尝试用本地别名解析，而不是交给联邦插件处理，从而触发解析失败错误。移除这个无效别名后，联邦插件就能正常处理远程模块的导入请求了。

内容的提问来源于stack exchange，提问作者ssuhat