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 |
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: