Configure rsbuild for web build and fix compatibility issues
- Add rsbuild.config.ts with proper configuration for: - React, Babel, and Expo polyfills - Environment variable definitions for expo-constants and @atproto - Module aliases for react-native-web and ESM packages - Disabled vendor chunk splitting to fix CommonJS scope issues - Built-in bundle analyzer instead of webpack-bundle-analyzer - Sentry integration support - Patch react-native-uitextview with Text.web.tsx fallback - Exclude @atproto, tlds, and @braintree from Babel processing This completes the migration from @expo/webpack-config to Rsbuild. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Samuel Newman
@@ -0,0 +1,265 @@
|
|||||||
|
import {createRequire} from 'node:module'
|
||||||
|
import {dirname, join} from 'node:path'
|
||||||
|
import {fileURLToPath} from 'node:url'
|
||||||
|
|
||||||
|
import {defineConfig} from '@rsbuild/core'
|
||||||
|
import {pluginBabel} from '@rsbuild/plugin-babel'
|
||||||
|
import {pluginReact} from '@rsbuild/plugin-react'
|
||||||
|
// @ts-expect-error - webpack plugins, types may not match exactly
|
||||||
|
import {sentryWebpackPlugin} from '@sentry/webpack-plugin'
|
||||||
|
|
||||||
|
const {version} = require('./package.json')
|
||||||
|
|
||||||
|
const require_ = createRequire(import.meta.url)
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||||
|
const nodeModules = join(__dirname, 'node_modules')
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
pluginReact(),
|
||||||
|
pluginBabel({
|
||||||
|
include: /\.(?:js|jsx|ts|tsx)$/,
|
||||||
|
// Exclude already-compiled packages that don't need babel transformation
|
||||||
|
exclude: [
|
||||||
|
/node_modules\/@atproto/,
|
||||||
|
/node_modules\/tlds/,
|
||||||
|
/node_modules\/@braintree/,
|
||||||
|
],
|
||||||
|
babelLoaderOptions: {
|
||||||
|
presets: [['babel-preset-expo', {lazyImports: true}]],
|
||||||
|
plugins: [
|
||||||
|
'macros',
|
||||||
|
['babel-plugin-react-compiler', {target: '19'}],
|
||||||
|
[
|
||||||
|
'module:react-native-dotenv',
|
||||||
|
{
|
||||||
|
envName: 'APP_ENV',
|
||||||
|
moduleName: '@env',
|
||||||
|
path: '.env',
|
||||||
|
allowUndefined: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'module-resolver',
|
||||||
|
{alias: {'#': './src', crypto: './src/platform/crypto.ts'}},
|
||||||
|
],
|
||||||
|
'react-native-reanimated/plugin',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
|
||||||
|
source: {
|
||||||
|
entry: {index: './index.web.js'},
|
||||||
|
define: {
|
||||||
|
__DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
|
||||||
|
// Expo public env vars - these are accessed via process.env.EXPO_PUBLIC_*
|
||||||
|
'process.env.EXPO_PUBLIC_ENV': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_ENV,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_RELEASE_VERSION': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_RELEASE_VERSION,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_BUNDLE_IDENTIFIER': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_BUNDLE_IDENTIFIER,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_BUNDLE_DATE': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_BUNDLE_DATE,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_LOG_LEVEL': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_LOG_LEVEL,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_LOG_DEBUG': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_LOG_DEBUG,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_BLUESKY_PROXY_DID': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_BLUESKY_PROXY_DID,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_CHAT_PROXY_DID': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_CHAT_PROXY_DID,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_SENTRY_DSN': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_SENTRY_DSN,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_BITDRIFT_API_KEY': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_BITDRIFT_API_KEY,
|
||||||
|
),
|
||||||
|
'process.env.EXPO_PUBLIC_GCP_PROJECT_ID': JSON.stringify(
|
||||||
|
process.env.EXPO_PUBLIC_GCP_PROJECT_ID,
|
||||||
|
),
|
||||||
|
// Other env vars used in the app
|
||||||
|
'process.env.BAPP_CONFIG_DEV_URL': JSON.stringify(
|
||||||
|
process.env.BAPP_CONFIG_DEV_URL,
|
||||||
|
),
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||||
|
'process.env.JEST_WORKER_ID': JSON.stringify(process.env.JEST_WORKER_ID),
|
||||||
|
// expo-constants uses this for web manifest
|
||||||
|
'process.env.APP_MANIFEST': JSON.stringify({}),
|
||||||
|
// expo uses these for platform detection
|
||||||
|
'process.env.EXPO_OS': JSON.stringify('web'),
|
||||||
|
'process.env.EXPO_BASE_URL': JSON.stringify(''),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: [
|
||||||
|
'.web.tsx',
|
||||||
|
'.web.ts',
|
||||||
|
'.web.js',
|
||||||
|
'.tsx',
|
||||||
|
'.ts',
|
||||||
|
'.js',
|
||||||
|
'.json',
|
||||||
|
],
|
||||||
|
alias: {
|
||||||
|
'react-native$': 'react-native-web',
|
||||||
|
'react-native-webview': 'react-native-web-webview',
|
||||||
|
'react-native-gesture-handler': false,
|
||||||
|
// Use source to allow .web.tsx resolution (patched with web fallback)
|
||||||
|
'react-native-uitextview': join(
|
||||||
|
nodeModules,
|
||||||
|
'react-native-uitextview/src/index',
|
||||||
|
),
|
||||||
|
// Force ESM version (same as webpack.config.js)
|
||||||
|
'unicode-segmenter/grapheme': require_
|
||||||
|
.resolve('unicode-segmenter/grapheme')
|
||||||
|
.replace(/\.cjs$/, '.js'),
|
||||||
|
// multiformats package exports resolution (same as metro.config.js)
|
||||||
|
// Use $ suffix for exact match and direct file paths
|
||||||
|
'multiformats/hashes/hasher$': join(
|
||||||
|
nodeModules,
|
||||||
|
'multiformats/esm/src/hashes/hasher.js',
|
||||||
|
),
|
||||||
|
'multiformats/cid$': join(nodeModules, 'multiformats/esm/src/cid.js'),
|
||||||
|
// @ipld/dag-cbor only exports '.' in package.json, use direct file path
|
||||||
|
'@ipld/dag-cbor$': join(nodeModules, '@ipld/dag-cbor/src/index.js'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
output: {
|
||||||
|
distPath: {
|
||||||
|
root: 'web-build',
|
||||||
|
js: 'static/js',
|
||||||
|
css: 'static/css',
|
||||||
|
image: 'static/media',
|
||||||
|
font: 'static/media',
|
||||||
|
svg: 'static/media',
|
||||||
|
media: 'static/media',
|
||||||
|
},
|
||||||
|
filename: {
|
||||||
|
js: '[name].[contenthash:8].js',
|
||||||
|
css: '[name].[contenthash:8].css',
|
||||||
|
},
|
||||||
|
assetPrefix: process.env.NODE_ENV === 'production' ? 'auto' : '/',
|
||||||
|
manifest: true,
|
||||||
|
sourceMap: {
|
||||||
|
js:
|
||||||
|
process.env.GENERATE_SOURCEMAP === 'false'
|
||||||
|
? false
|
||||||
|
: process.env.NODE_ENV === 'production'
|
||||||
|
? 'source-map'
|
||||||
|
: 'cheap-module-source-map',
|
||||||
|
css: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
html: {
|
||||||
|
template: './web/index.html',
|
||||||
|
templateParameters: {WEB_TITLE: 'Bluesky'},
|
||||||
|
favicon: './assets/favicon.png',
|
||||||
|
},
|
||||||
|
|
||||||
|
server: {port: 19006},
|
||||||
|
|
||||||
|
performance: {
|
||||||
|
// Enable with BUNDLE_ANALYZE=true rsbuild build
|
||||||
|
// Or BUNDLE_ANALYZE=server to open in browser
|
||||||
|
bundleAnalyze: process.env.BUNDLE_ANALYZE
|
||||||
|
? {
|
||||||
|
analyzerMode:
|
||||||
|
process.env.BUNDLE_ANALYZE === 'server' ? 'server' : 'static',
|
||||||
|
openAnalyzer: process.env.BUNDLE_ANALYZE === 'server',
|
||||||
|
generateStatsFile: true,
|
||||||
|
statsFilename: 'stats.json',
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
},
|
||||||
|
|
||||||
|
tools: {
|
||||||
|
rspack: (config, {rspack}) => {
|
||||||
|
// Wrap chunks in IIFE for proper CommonJS scope (fixes "exports is not defined")
|
||||||
|
config.output = config.output || {}
|
||||||
|
config.output.iife = true
|
||||||
|
|
||||||
|
// Disable async vendor chunk splitting - fixes "exports is not defined"
|
||||||
|
// error with CommonJS modules like @atproto/api
|
||||||
|
config.optimization = config.optimization || {}
|
||||||
|
config.optimization.splitChunks = {
|
||||||
|
chunks: 'async',
|
||||||
|
cacheGroups: {
|
||||||
|
// Disable default vendor chunk splitting
|
||||||
|
defaultVendors: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Module replacements for packages that don't work with rspack's module resolution
|
||||||
|
config.plugins = config.plugins || []
|
||||||
|
|
||||||
|
// multiformats/hashes/hasher - redirect to ESM source file
|
||||||
|
config.plugins.push(
|
||||||
|
new rspack.NormalModuleReplacementPlugin(
|
||||||
|
/^multiformats\/hashes\/hasher$/,
|
||||||
|
join(nodeModules, 'multiformats/esm/src/hashes/hasher.js'),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
// multiformats/cid - redirect to ESM source file
|
||||||
|
config.plugins.push(
|
||||||
|
new rspack.NormalModuleReplacementPlugin(
|
||||||
|
/^multiformats\/cid$/,
|
||||||
|
join(nodeModules, 'multiformats/esm/src/cid.js'),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
// @ipld/dag-cbor - redirect to src
|
||||||
|
config.plugins.push(
|
||||||
|
new rspack.NormalModuleReplacementPlugin(
|
||||||
|
/^@ipld\/dag-cbor$/,
|
||||||
|
join(nodeModules, '@ipld/dag-cbor/src/index.js'),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
// Force CommonJS modules to be parsed correctly
|
||||||
|
config.module = config.module || {}
|
||||||
|
config.module.parser = config.module.parser || {}
|
||||||
|
config.module.parser.javascript = config.module.parser.javascript || {}
|
||||||
|
config.module.parser.javascript.commonjsMagicComments = true
|
||||||
|
|
||||||
|
config.module.rules = config.module.rules || []
|
||||||
|
|
||||||
|
// postMock.html for react-native-web-webview
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /postMock\.html$/,
|
||||||
|
type: 'asset/resource',
|
||||||
|
generator: {filename: '[name][ext]'},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Sentry (optional)
|
||||||
|
if (process.env.SENTRY_AUTH_TOKEN) {
|
||||||
|
config.plugins = config.plugins || []
|
||||||
|
config.plugins.push(
|
||||||
|
sentryWebpackPlugin({
|
||||||
|
org: 'blueskyweb',
|
||||||
|
project: 'app',
|
||||||
|
authToken: process.env.SENTRY_AUTH_TOKEN,
|
||||||
|
release: {
|
||||||
|
name: process.env.SENTRY_RELEASE || version,
|
||||||
|
dist: process.env.SENTRY_DIST,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user