Encountered errors with react-native-fs, react-native-vector-icons, and realm after migrating from webpack to rspack. #754
Comments
nthtrung09it
added
status:new
|
@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:
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 |
jbroma
added
status:wip
|
I followed your guide: react-native-vector-icons and react-native-fs: it works. After that: 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 :( 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 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. |
|
so I will wait for 5.0.0-alpha.1 ... |
|
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 👍 |
|
@nthtrung09it please try freshly released Re.Pack 5.0.0-rc.0 |
|
@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
|
|
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 👍 |
checking the showcase repo hourly 👯♂ |
|
@jbroma hey, any news? |
|
@jbroma hey, how is it going? can we have it in this month :) |
|
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. I'll close this issue since we've solved everything in it and reanimated was already a bit off-topic |
Describe the bug
I'm migrating from repack to repack with rspack.
Here is the babel-load rule when using with webpack.
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.
The realm error I think because the file:
/Users/kernel/Documents/RepackBareRepo_Issue/node_modules/realm/index.react-native.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 foundRe.Pack Version
5.0.0-alpha.0
Reproduction
https://github.com/nthtrung09it/repack-v5
Steps to reproduce
pnpm install
pnpm start
The text was updated successfully, but these errors were encountered: