import pkg from "./package.json";
...
shared: [
'react',
'react-dom',
'zustand',
'react-error-boundary',
'@tanstack/react-query',
{ '@sm/ui': { version: pkg.dependencies['@sm/ui'] } },
{ '@sm/util': { version: pkg.dependencies['@sm/util'] } },
// or
{
'@sm/ui': {
packagePath: '../../packages/ui/',
},
'@sm/util': {
packagePath: '../../packages/util/',
},
},
]
module federation 작업중에 생긴 문제들이나 구현 방법등을 기록하는 시리즈를 써보고자 한다.(나는야 콘텐츠에 미친 사람..)
Add version to description file, or manually specify version in shared config.
// host
const federationConfig = env => ({
name: 'container',
remotes: {
qm: {
external: `${env?.['WORKSPACE_QM_URL']}/qm/v2/assets/remoteEntry.js`,
from: 'vite',
},
dc: {
external: `${env?.['WORKSPACE_DC_URL']}/dc/v2/assets/remoteEntry.js`,
from: 'vite',
}
},
shared: [
'react',
'react-dom',
'react-error-boundary',
'zustand',
'@tanstack/react-query',
{ '@sm/ui': { version: pkg.dependencies['@sm/ui'] } },
{ '@sm/util': { version: pkg.dependencies['@sm/util'] } },
],
});
// remote
export const mfConfig = {
name: 'dc',
filename: 'remoteEntry.js',
// Modules to expose
exposes: {
'./app': './src/app.tsx',
'./useStore': './src/stores/global.ts',
},
shared: ['react', 'react-dom', 'zustand', '@sm/ui', '@sm/util'],
};
// host
const federationConfig = env => ({
name: 'container',
remotes: {
qm: {
external: `${env?.['WORKSPACE_QM_URL']}/qm/v2/assets/remoteEntry.js`,
from: 'vite',
},
dc: {
external: `${env?.['WORKSPACE_DC_URL']}/dc/v2/assets/remoteEntry.js`,
from: 'vite',
}
},
shared: [
'react',
'react-dom',
'react-error-boundary',
'zustand',
'@tanstack/react-query',
{
'@sm/ui': {
packagePath: '../../packages/ui/',
},
'@sm/util': {
packagePath: '../../packages/util/',
},
},
],
});
// remote
export const mfConfig = {
name: 'dc',
filename: 'remoteEntry.js',
// Modules to expose
exposes: {
'./app': './src/app.tsx',
'./useStore': './src/stores/global.ts',
},
shared: ['react', 'react-dom', 'zustand', '@sm/ui', '@sm/util'],
};