rsbuild-plugin-react-router/examples/federation/epic-stack/rsbuild.config.ts at main · rstackjs/rsbuild-plugin-react-router · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack'
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { pluginReactRouter } from 'rsbuild-plugin-react-router'

import 'react-router'

const REMOTE_PORT = Number(process.env.REMOTE_PORT || 3007)
const REMOTE_ORIGIN =
	process.env.REMOTE_ORIGIN ?? `http://localhost:${REMOTE_PORT}`

// Common shared dependencies for Module Federation
const sharedDependencies = {
	'react-router': {
		singleton: true,
	},
	'react-router/': {
		singleton: true,
	},
	react: {
		singleton: true,
	},
	'react/': {
		singleton: true,
	},
	'react-dom': {
		singleton: true,
	},
	'react-dom/': {
		singleton: true,
	},
}

// Common Module Federation configuration
const commonFederationConfig = {
	name: 'host',
	shareStrategy: "loaded-first" as const,
	shared: sharedDependencies
}

// Web-specific federation config
const webFederationConfig = {
	...commonFederationConfig,
	experiments: {
		asyncStartup: true,
	},
	dts: false,
	remoteType: 'import' as const,
	remotes: {
		remote: `${REMOTE_ORIGIN}/static/js/remote.js`,
	},
}

// Node-specific federation config
const nodeFederationConfig = {
	...commonFederationConfig,
	experiments: {
		asyncStartup: true,
	},
	dts: false,
	remotes: {
		remote: `remote@${REMOTE_ORIGIN}/static/static/js/remote.js`,
	},
	runtimePlugins: ['@module-federation/node/runtimePlugin'],
}

export default defineConfig({
	dev: {
		client: {
			overlay: false,
		},
	},
	server: {
		port: Number(process.env.PORT || 3000),
	},
	output: {
		externals: ['better-sqlite3', 'express', 'ws'],
	},
	environments: {
		web: {
			tools: {
				rspack: {
					plugins: [
						new ModuleFederationPlugin(webFederationConfig),
					],
				},
			},
			plugins: [],
		},
		node: {
			tools: {
				rspack: {
					plugins: [
						new ModuleFederationPlugin(nodeFederationConfig),
					],
				},
			},
			plugins: [],
		},
	},
	plugins: [
		pluginReactRouter({
			customServer: true,
			serverOutput: 'commonjs',
			federation: true,
		}),
		pluginReact({
			fastRefresh: false,
			swcReactOptions: {
				refresh: false,
				development: false,
			},
			splitChunks: {
				react: false,
				router: false,
			},
			reactRefreshOptions: {
				overlay: false,
				exclude: /root/,
			},
		}),
	],
})