Open nthtrung09it opened 2 days ago
@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-icons
and react-native-fs
to a new rule that removes flow-typing using flow-loader
from 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 that swc
will 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 realm
entrypoint 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.
so I will wait for 5.0.0-alpha.1 ...
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
Re.Pack Version
5.0.0-alpha.0
Reproduction
https://github.com/nthtrung09it/repack-v5
Steps to reproduce
pnpm install pnpm start