jbroma
commented
2 months 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-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
nthtrung09it
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