Currently
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'),
},
},
};
});
on my code i put
const ModuleA = React.lazy(() => import('remote_app/ModuleA'));But keep getting
Failed to resolve import "remote_app/ModuleA"without setting up alias the error is same. what to put on resolve to fix this? I've tested the code without resolve block it works just fine.