Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import type { Esmx } from '@esmx/core';
import { createRspackHtmlApp, rspack } from '@esmx/rspack';
import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
import type { RspackReactAppOptions } from './react';
export function createRspackReactApp(
esmx: Esmx,
options?: RspackReactAppOptions
) {
return createRspackHtmlApp(esmx, {
...options,
chain(context) {
const { chain, buildTarget, esmx } = context;
// Add .tsx and .jsx to extensions
chain.resolve.extensions.add('.tsx').add('.jsx');
// Configure React JSX/TSX loader
// Create a separate rule for TSX/JSX files to add React support
chain.module
.rule('react-tsx')
.test(/\.(tsx|jsx)$/)
.use('swc-loader')
.loader('builtin:swc-loader')
.options({
jsc: {
parser: {
syntax: 'typescript',
tsx: true,
decorators: true
},
transform: {
react: {
runtime: 'automatic',
development:
buildTarget === 'client' && !esmx.isProd,
refresh:
buildTarget === 'client' && !esmx.isProd
}
}
}
})
.end()
.type('javascript/auto');
// Add React Refresh plugin for HMR (client + development only)
// Automatically enabled for client development, same as Vue HMR
if (buildTarget === 'client' && !esmx.isProd) {
chain.plugin('react-refresh').use(ReactRefreshRspackPlugin);
}
// Note: React SSR doesn't need special loader like Vue
// React components can be rendered directly with react-dom/server
// React aliases are handled automatically by Rspack
// No need to set explicit aliases
// Define React environment
if (buildTarget === 'client') {
chain.plugin('define-react-env').use(rspack.DefinePlugin, [
{
'process.env.NODE_ENV': JSON.stringify(
esmx.isProd ? 'production' : 'development'
)
}
]);
}
options?.chain?.(context);
}
});
}
|