callstack
Encountered errors with react-native-fs, react-native-vector-icons, and realm after migrating from webpack to rspack.
Describe the bug
I'm migrating from repack to repack with rspack. Here is the babel-load rule when using with webpack.
{
test: /\.[cm]?[jt]sx?$/,
include: [
/node_modules(.*[/\\])+react/,
/node_modules(.*[/\\])+react-native/,
/node_modules(.*[/\\])+@react-native/,
/node_modules(.*[/\\])+@react-navigation/,
/node_modules(.*[/\\])+@react-native-community/,
/node_modules(.*[/\\])+react-native-reanimated/,
/node_modules(.*[/\\])+@expo/,
/node_modules(.*[/\\])+pretty-format/,
/node_modules(.*[/\\])+metro/,
/node_modules(.*[/\\])+abort-controller/,
/node_modules(.*[/\\])+webpack/,
/node_modules(.*[/\\])+@callstack\/repack\/client/,
/node_modules(.*[/\\])+@callstack\/repack/,
/node_modules(.*[/\\])+@gorhom/,
/node_modules(.*[/\\])+lottie-react-native/,
/node_modules(.*[/\\])+realm/,
/node_modules(.*[/\\])+@th3rdwave\/react-navigation-bottom-sheet/,
/node_modules(.*[/\\])+react-native-gesture-handler/,
/node_modules(.*[/\\])+react-native-safe-area-context/,
/node_modules(.*[/\\])+react-native-screens/,
/node_modules(.*[/\\])+react-native-svg/,
/node_modules(.*[/\\])+react-native-vector-icons/,
/node_modules(.*[/\\])+react-native-webview/,
/node_modules(.*[/\\])+@react-native-firebase/,
/node_modules(.*[/\\])+@react-native-google-signin/,
/node_modules(.*[/\\])+@react-native-async-storage/,
/node_modules(.*[/\\])+@sentry/,
/node_modules(.*[/\\])+axios/,
/node_modules(.*[/\\])+immer/,
/node_modules(.*[/\\])+redux/,
/node_modules(.*[/\\])+redux-thunk/,
/node_modules(.*[/\\])+react-redux/,
/node_modules(.*[/\\])+reselect/,
/node_modules(.*[/\\])+@reduxjs\/toolkit/,
/node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit/,
path.resolve(__dirname, '../kits'),
],
use: 'babel-loader',
},
When migrating to rspack, I don't know how to migrate the above rule :(
Here is the error log when I start the project. It seems that the errors related to react-native-fs, react-native-vector-icons and realm.
(base) ➜ RepackBareRepo_Issue git:(main) ✗ pnpm start
> [email protected] start /Users/kernel/Documents/RepackBareRepo_Issue
> concurrently --raw -P 'pnpm:start:*(!standalone) {1}'
> [email protected] start:host /Users/kernel/Documents/RepackBareRepo_Issue
> pnpm --filter host start
> [email protected] start:miniapp /Users/kernel/Documents/RepackBareRepo_Issue
> pnpm --filter miniapp start
> [email protected] start:catalog /Users/kernel/Documents/RepackBareRepo_Issue
> pnpm --filter catalog-server start
> [email protected] start /Users/kernel/Documents/RepackBareRepo_Issue/packages/catalog-server
> node api/index.js
> [email protected] start /Users/kernel/Documents/RepackBareRepo_Issue/packages/miniapp
> react-native webpack-start --port 9003 --webpackConfig webpack.config.mjs
> [email protected] start /Users/kernel/Documents/RepackBareRepo_Issue/packages/host
> react-native webpack-start --webpackConfig webpack.config.mjs
[CatalogServer] Server listening at port 3000
📦 Re.Pack 5.0.0-alpha.0
📦 Re.Pack 5.0.0-alpha.0
**** env: {"bundleFilename":"","context":"/Users/kernel/Documents/RepackBareRepo_Issue/packages/miniapp","reactNativePath":"/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/react-native","mode":"development","devServer":{"port":9003,"host":"localhost","hmr":true},"platform":"ios"}
**** env: {"bundleFilename":"","context":"/Users/kernel/Documents/RepackBareRepo_Issue/packages/miniapp","reactNativePath":"/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/react-native","mode":"development","devServer":{"port":9003,"host":"localhost","hmr":true},"platform":"android"}
ℹ [17:17:57.746Z][DevServer] Server listening at http://[::1]:9003
ℹ [17:17:57.748Z][DevServer] Server listening at http://127.0.0.1:9003
ℹ [17:17:57.749Z][DevServer] Starting build for platforms: ios, android
ℹ [17:17:57.755Z][DevServer] Server listening at http://[::1]:8081
ℹ [17:17:57.756Z][DevServer] Server listening at http://127.0.0.1:8081
ℹ [17:17:57.756Z][DevServer] Starting build for platforms: ios, android
ℹ [17:17:59.776Z][LoggerPlugin] Bundle built { time: 2024 }
ℹ [17:17:59.813Z][LoggerPlugin] Bundle built { time: 2042 }
✖ [17:18:00.349Z][LoggerPlugin] Failed to build bundle due to errors
✖ [17:18:00.349Z][LoggerPlugin] Error in "../../node_modules/realm/prebuilds/node/realm.node":
× Module parse failed:
╰─▶ × JavaScript parsing error: Unexpected character '�'
╭─[1:0]
1 │ ����
x �h__TEXT@@@@
· ▲
2 │ __text__TEXT�^��7�^�__stubs__TEXT|?8�|?�
__stub_helper__TEXT�O8\�O8�__init_offsets__TEXTX`8XX`8__gcc_except_tab__TEXT�`8���`8__const__TEXT�Y<���Y<__cstring__TEXTf)>��f)>__oslogstring__TEXTC?
C?__unwind_info__TEXTP?�<P?__eh_frame__TEXT0>@�0>@
h8__DATA_CONST@@�@@�__got__DATA_CONST@@8@@`__const__DATA_CONST8B@x}8B@__cfstring__DATA_CONST��B ��B�__DATA�B�B�__la_symbol_ptr__DATA�B�
2 │ �B�__data__DATA��B���B__bss__DATA�`Cp__common__DATAP~C�H__LINKEDIT�C��V
╰────
help:
You may need an appropriate loader to handle this file type.
✖ [17:18:00.349Z][LoggerPlugin] Error in "../../node_modules/react-native-vector-icons/lib/NativeRNVectorIcons.js":
× Module build failed:
├─▶ × × Expected ',', got '{'
│ │ ╭─[/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/react-native-vector-icons/lib/NativeRNVectorIcons.js:3:1]
│ │ 1 │ // @flow
│ │ 2 │ // eslint-disable-next-line import/no-unresolved
│ │ 3 │ import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
│ │ · ─
│ │ 4 │ import { TurboModuleRegistry } from 'react-native';
│ │ 5 │ export interface Spec extends TurboModule {
│ │ 6 │ getImageForFont(fontName: string, glyph: string, fontSize: number, color: number): Promise<string>,
│ │ ╰────
│ │
│
╰─▶ Syntax Error
✖ [17:18:00.349Z][LoggerPlugin] Error in "../../node_modules/react-native-fs/FS.common.js":
× Module build failed:
├─▶ × × Expected ',', got ':'
│ │ ╭─[/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/react-native-fs/FS.common.js:30:1]
│ │ 27 │ return jobId;
│ │ 28 │ };
│ │ 29 │
│ │ 30 │ var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
│ │ · ─
│ │ 31 │
│ │ 32 │ type MkdirOptions = {
│ │ 33 │ NSURLIsExcludedFromBackupKey?: boolean; // iOS only
│ │ ╰────
│ │
│
╰─▶ Syntax Error
✖ [17:18:00.349Z][LoggerPlugin] Error in "node:fs":
× Module build failed:
╰─▶ × Reading from "node:fs" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.349Z][LoggerPlugin] Error in "node:path":
× Module build failed:
╰─▶ × Reading from "node:path" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.349Z][LoggerPlugin] Error in "node:util":
× Module build failed:
╰─▶ × Reading from "node:util" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.349Z][LoggerPlugin] Error in "node:v8":
× Module build failed:
╰─▶ × Reading from "node:v8" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.349Z][LoggerPlugin] Error in "node:vm":
× Module build failed:
╰─▶ × Reading from "node:vm" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.412Z][LoggerPlugin] Failed to build bundle due to errors
✖ [17:18:00.412Z][LoggerPlugin] Error in "../../node_modules/realm/prebuilds/node/realm.node":
× Module parse failed:
╰─▶ × JavaScript parsing error: Unexpected character '�'
╭─[1:0]
1 │ ����
x �h__TEXT@@@@
· ▲
2 │ __text__TEXT�^��7�^�__stubs__TEXT|?8�|?�
__stub_helper__TEXT�O8\�O8�__init_offsets__TEXTX`8XX`8__gcc_except_tab__TEXT�`8���`8__const__TEXT�Y<���Y<__cstring__TEXTf)>��f)>__oslogstring__TEXTC?
C?__unwind_info__TEXTP?�<P?__eh_frame__TEXT0>@�0>@
h8__DATA_CONST@@�@@�__got__DATA_CONST@@8@@`__const__DATA_CONST8B@x}8B@__cfstring__DATA_CONST��B ��B�__DATA�B�B�__la_symbol_ptr__DATA�B�
2 │ �B�__data__DATA��B���B__bss__DATA�`Cp__common__DATAP~C�H__LINKEDIT�C��V
╰────
help:
You may need an appropriate loader to handle this file type.
✖ [17:18:00.412Z][LoggerPlugin] Error in "../../node_modules/react-native-vector-icons/lib/NativeRNVectorIcons.js":
× Module build failed:
├─▶ × × Expected ',', got '{'
│ │ ╭─[/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/react-native-vector-icons/lib/NativeRNVectorIcons.js:3:1]
│ │ 1 │ // @flow
│ │ 2 │ // eslint-disable-next-line import/no-unresolved
│ │ 3 │ import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
│ │ · ─
│ │ 4 │ import { TurboModuleRegistry } from 'react-native';
│ │ 5 │ export interface Spec extends TurboModule {
│ │ 6 │ getImageForFont(fontName: string, glyph: string, fontSize: number, color: number): Promise<string>,
│ │ ╰────
│ │
│
╰─▶ Syntax Error
✖ [17:18:00.412Z][LoggerPlugin] Error in "../../node_modules/react-native-fs/FS.common.js":
× Module build failed:
├─▶ × × Expected ',', got ':'
│ │ ╭─[/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/react-native-fs/FS.common.js:30:1]
│ │ 27 │ return jobId;
│ │ 28 │ };
│ │ 29 │
│ │ 30 │ var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
│ │ · ─
│ │ 31 │
│ │ 32 │ type MkdirOptions = {
│ │ 33 │ NSURLIsExcludedFromBackupKey?: boolean; // iOS only
│ │ ╰────
│ │
│
╰─▶ Syntax Error
✖ [17:18:00.412Z][LoggerPlugin] Error in "node:fs":
× Module build failed:
╰─▶ × Reading from "node:fs" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.412Z][LoggerPlugin] Error in "node:path":
× Module build failed:
╰─▶ × Reading from "node:path" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.412Z][LoggerPlugin] Error in "node:util":
× Module build failed:
╰─▶ × Reading from "node:util" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.412Z][LoggerPlugin] Error in "node:v8":
× Module build failed:
╰─▶ × Reading from "node:v8" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
✖ [17:18:00.412Z][LoggerPlugin] Error in "node:vm":
× Module build failed:
╰─▶ × Reading from "node:vm" is not handled by plugins (Unhandled scheme).
│ Rspack supports "data:" and "file:" URIs by default.
│ You may need an additional plugin to handle "node:" URIs.
The realm error I think because the file: /Users/kernel/Documents/RepackBareRepo_Issue/node_modules/realm/index.react-native.js
// Runtime check to provide our Node.js entrypoint instead of requiring end-users to apply a mock
if (typeof process !== "undefined" && typeof process.env?.JEST_WORKER_ID !== "undefined") {
// Re-naming "require" to obfuscate the call from Metro
const nodeRequire = require;
module.exports = nodeRequire("./dist/platform/node/index.js");
} else {
module.exports = require("./dist/platform/react-native/index.js");
}
loads the node platform for jest testing.
System Info
System:
OS: macOS 15.0
CPU: (12) arm64 Apple M2 Max
Memory: 13.54 GB / 64.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.16.0
path: ~/.nvm/versions/node/v20.16.0/bin/node
Yarn:
version: 1.22.22
path: ~/.nvm/versions/node/v20.16.0/bin/yarn
npm:
version: 10.8.1
path: ~/.nvm/versions/node/v20.16.0/bin/npm
Watchman:
version: 2024.09.02.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/kernel/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.0
- iOS 18.0
- macOS 15.0
- tvOS 18.0
- visionOS 2.0
- watchOS 11.0
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2412.12266719
Xcode:
version: 16.0/16A242
path: /usr/bin/xcodebuild
Languages:
Java:
version: 20.0.2
path: /Users/kernel/.jenv/shims/javac
Ruby:
version: 3.2.2
path: /Users/kernel/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Re.Pack Version
5.0.0-alpha.0
Reproduction
https://github.com/nthtrung09it/repack-v5
Steps to reproduce
pnpm install pnpm start
@nthtrung09it here's the diff that should work for you:
diff --git a/packages/host/webpack.config.mjs b/packages/host/webpack.config.mjs
index bbbd1a9..759a530 100644
--- a/packages/host/webpack.config.mjs
+++ b/packages/host/webpack.config.mjs
@@ -1,9 +1,13 @@
+import {createRequire} from 'module';
import path from 'path';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
import * as Repack from '@callstack/repack';
import rspack from '@rspack/core';
import {getSharedDependencies} from 'kernel-sdk';
+const require = createRequire(import.meta.url);
+const resolve = require.resolve;
+
export default env => {
const {
mode = 'development',
@@ -15,8 +19,7 @@ export default env => {
bundleFilename = undefined,
sourceMapFilename = undefined,
assetsPath = undefined,
- reactNativePath = new URL('./node_modules/react-native', import.meta.url)
- .pathname,
+ reactNativePath = resolve('react-native'),
} = env;
const dirname = Repack.getDirname(import.meta.url);
@@ -74,9 +77,14 @@ export default env => {
* dependency. You might need it when using workspaces/monorepos or unconventional project
* structure. For simple/typical project you won't need it.
*/
+ importsFields: [],
alias: {
'react-native': reactNativePath,
- }
+ realm$: path.join(
+ path.dirname(resolve('realm/package.json')),
+ 'dist/platform/react-native/index.js',
+ ),
+ },
},
/**
@@ -137,22 +145,21 @@ export default env => {
Repack.REACT_NATIVE_LOADING_RULES,
Repack.NODE_MODULES_LOADING_RULES,
{
- test: /\.[jt]sx?$/,
+ test: /\.jsx?$/,
type: 'javascript/auto',
- include: [/repack[/\\]dist/],
+ include: [
+ /node_modules[/\\]react-native-vector-icons/,
+ /node_modules[/\\]react-native-fs/,
+ ],
use: {
- loader: 'builtin:swc-loader',
- options: {
- env: { targets: { 'react-native': '0.75' } },
- jsc: { externalHelpers: true },
- },
+ loader: '@callstack/repack/flow-loader',
+ options: {all: true},
},
},
- /* codebase rules */
{
test: /\.[jt]sx?$/,
type: 'javascript/auto',
- exclude: [/node_modules/, /repack[/\\]dist/],
+ exclude: [/node_modules/],
use: {
loader: 'builtin:swc-loader',
options: {
What needed to be done and why:
-
We needed to add
react-native-vector-iconsandreact-native-fsto a new rule that removes flow-typing usingflow-loaderfrom Re.Pack - before stable release we will most likely add a default rule with common react-native libraries that need flow transpilation so that it's handled out of the box - in the future its possible thatswcwill implement stripping flow types as well but right now it's not there so we need to add libs to the rule like this. -
Disable
importsFields- metro doesnt support this, so we should disable this altogether for time being for max compat - fix for this will be included in the next release -
We need to point to
realmentrypoint manually because they are using a hacky workaround here: https://github.com/realm/realm-js/blob/main/packages/realm/index.react-native.js - this doesn't play nicely with resolution in webpack. There is not much we can do on the Re.Pack side of things - this needs to be fixed in the lib itself.
I've also simplifed the rules a little bit since you copied the rules from the repack repo and some of them are only needed in the monorepo env here.
With all of these fixes applied, you should be able to compile it succesfully
I followed your guide:
react-native-vector-icons and react-native-fs: it works. realm: I added patch package to update the index.react-native.js, and then added the realm into babel-loader, so it works.
After that: I added the redux and related dependencies into babel-loader, it works. But when I added @gorhom/bottomsheet into babel-loader, but it does not work.
{
test: /\.[cm]?[jt]sx?$/,
include: [
/node_modules(.*[/\\])+realm/,
/node_modules(.*[/\\])+@realm\/react/,
// Make redux work
/node_modules(.*[/\\])+redux/,
/node_modules(.*[/\\])+redux-thunk/,
/node_modules(.*[/\\])+react-redux/,
/node_modules(.*[/\\])+reselect/,
/node_modules(.*[/\\])+@reduxjs\/toolkit/,
/node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit/,
// Make bottom sheet work?
/node_modules(.*[/\\])+@gorhom/,
/node_modules(.*[/\\])+react-native-gesture-handler/,
/node_modules(.*[/\\])+react-native-safe-area-context/,
/node_modules(.*[/\\])+react-native-reanimated/,
],
rules: [
{
test: /\.[cm]?[jt]sx?$/,
use: [
{
loader: 'babel-loader',
},
],
},
],
type: 'javascript/auto',
},
Can you take a look at it? Do you have any documentation about setting up loaders for dependencies? I really want to debug and solve it by myself, but I can't find documents about it :( I updated the reproduction repo.
Thanks @jbroma
@nthtrung09it there should be no need to add these rules for redux - should work without it through the rules for swc-loader, but I've managed to find a bug in our rules thanks to that -> we were not picking up .cjs/.mjs files to transform - will be fixed
As for the bottomsheet and reanimated - despite running the reanimated plugin on the reanimated lib itself which was first transpiled through the swc-loader, the app started crashing, but when transpiled only through the babel loader it seemed to work - this is something that needs further research and find where the incompatibility is coming from.
hi @jbroma, how is it going? I checked the Pull requests, there are lots of new things MF 2.0, debugger interaction 💯
hey, lots of stuff going on at the same time, hopefully a new alpha release this week 🤞 This one should include MF2, handling some edge cases right now
hey @jbroma, how is it going? is v4.3.3 compatible with react native 0.76?
hi @nthtrung09it, I was on sick leave last week so apologies for the late reply.
4.3.3 is not compatible with RN 0.76, V5 is, expect an RC release soon
so in v5.0, can I still use the ScriptManager.shared.addResolver()? I checked out the tester-federation-v2 branch and saw there is no resolver.
yeah, you can still use this, should be able to override the default that's provided out of the box 👍
@jbroma just tried to update 5.0.0-rc.0 and react-native 0.76.1, the app shows "blank" page. Is there anything I should modify for "bottomsheet" and "reanimated">
And there is a warning:
Is there a migration guide for ModuleFederationPluginV2?
hey, reanimated thing is still not fixed I'm afraid, I plan to have it fixed before the stable release of V5.
As for migration guide for MF2, you can follow the tester-federation-v2 example here in repack monorepo but also follow these rough guidelines:
- import
Repack.plugins.ModuleFederationPluginV2 - set it up similarly to the one in tester federation v2
- get rid of
Federated.importModuleand just use plain dynamic import - you can also try removing the resolver setup and rely on the default shipped with Repack 5 (take a look at
index.jsin the tester)
The reanimated plays an important role in my app.
Currently I use resolver setup to determine the latest container version to load for each module ; also each time the download failed, I will try to change the container URl, ... Can I still use the resolver setup in federation V2?
The reanimated plays an important role in my app.
Currently I use resolver setup to determine the latest container version to load for each module ; also each time the download failed, I will try to change the container URl, ... Can I still use the resolver setup in federation V2?
yes, the idea is to provide a default integration that you can always customize to your liking, please give it a shot and see if it's working 🙏
made some progress with reanimated, it will be supported through plugin in repack 👍
made some progress with reanimated, it will be supported through plugin in repack 👍
checking the showcase repo hourly 👯♂
5.0.0-rc.3 includes @callstack/repack-plugin-reanimated which takes care of integrating Reanimated for you - the plugin is optional so you need to install via your package manager (npm/yarn/pnpm) and then just import the plugin and it in your rspack.config.js.
cc @nthtrung09it
I'll close this issue since we've solved everything in it and reanimated was already a bit off-topic