Comments (9)
Hi @nazrighazi-cd,
It looks like an issue with configuration of webpack rather than a react-navigation
issue. With the information you've provided, I think it might have to do with a dependency that's being shared, can you please share your MF configuration in both MFEs?
from repack.
I'll check it in the super-app-showcase
as you reported that error there as well
callstack/super-app-showcase#78
from repack.
Here is my webpack
import path from 'path';
import TerserPlugin from 'terser-webpack-plugin';
import * as Repack from '@callstack/repack';
export default (env) => {
const {
mode = 'development',
context = Repack.getDirname(import.meta.url),
entry = './index.js',
platform = process.env.PLATFORM,
minimize = mode === 'production',
devServer = undefined,
bundleFilename = undefined,
sourceMapFilename = undefined,
assetsPath = undefined,
reactNativePath = new URL('./node_modules/react-native', import.meta.url)
.pathname,
} = env;
const dirname = Repack.getDirname(import.meta.url);
if (!platform) {
throw new Error('Missing platform');
}
process.env.BABEL_ENV = mode;
return {
mode,
devtool: false,
context,
entry: [
...Repack.getInitializationEntries(reactNativePath, {
hmr: devServer && devServer.hmr,
}),
entry,
],
resolve: {
...Repack.getResolveOptions(platform),
alias: {
'react-native': reactNativePath,
'@cd-next-gen-app/ui-components': new URL(
'../../../libs/ui-components/src/index.ts',
import.meta.url
).pathname,
'@cd-next-gen-app/icons': new URL(
'../../../libs/icons/src/index.ts',
import.meta.url
).pathname,
'@cd-next-gen-app/themes': new URL(
'../../../libs/themes/src/index.ts',
import.meta.url
).pathname,
'@cd-next-gen-app/store': new URL(
'../store/src/index.ts',
import.meta.url
).pathname,
'@cd-next-gen-app/containers': new URL(
'../../../libs/containers/src/index.ts',
import.meta.url
).pathname,
'@cd-next-gen-app/components': new URL(
'../../../libs/components/src/index.ts',
import.meta.url
).pathname,
},
},
output: {
clean: true,
hashFunction: 'xxhash64',
path: path.join(dirname, 'build/generated', platform),
filename: 'index.bundle',
chunkFilename: '[name].chunk.bundle',
publicPath: Repack.getPublicPath({ platform, devServer }),
},
optimization: {
/** Enables minification based on values passed from React Native CLI or from fallback. */
minimize,
/** Configure minimizer to process the bundle. */
minimizer: [
new TerserPlugin({
test: /\.(js)?bundle(\?.*)?$/i,
extractComments: false,
terserOptions: {
format: {
comments: false,
},
},
}),
],
chunkIds: 'named',
},
module: {
rules: [
{
test: /\.[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(.*[/\\])+@expo/,
/node_modules(.*[/\\])+pretty-format/,
/node_modules(.*[/\\])+metro/,
/node_modules(.*[/\\])+abort-controller/,
/node_modules(.*[/\\])+@callstack\/repack/,
/node_modules(.*[/\\])+native-base/,
/node_modules(.*[/\\])+react-freeze/,
/node_modules(.*[/\\])+@react-stately/,
/node_modules(.*[/\\])+react-native-mmkv/,
/node_modules(.*[/\\])+react-native-svg/,
/node_modules(.*[/\\])+lottie-react-native/,
/node_modules(.*[/\\])+i18next/,
/node_modules(.*[/\\])+react-i18next/,
],
use: 'babel-loader',
},
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
/** Add React Refresh transform only when HMR is enabled. */
plugins:
devServer && devServer.hmr
? ['module:react-refresh/babel']
: undefined,
},
},
},
{
test: Repack.getAssetExtensionsRegExp(
Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
),
use: {
loader: '@callstack/repack/assets-loader',
options: {
platform,
devServerEnabled: Boolean(devServer),
scalableAssetExtensions: Repack.SCALABLE_ASSETS,
},
},
},
{
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
native: true,
},
},
],
},
],
},
plugins: [
new Repack.RepackPlugin({
context,
mode,
platform,
devServer,
output: {
bundleFilename,
sourceMapFilename,
assetsPath,
},
}),
new Repack.plugins.ModuleFederationPlugin({
name: 'b2c-main-app',
shared: {
react: {
singleton: true,
eager: true,
requiredVersion: '18.2.0',
},
'react-native': {
singleton: true,
eager: true,
requiredVersion: '0.72.7',
},
'@react-navigation/native': {
singleton: true,
eager: true,
requiredVersion: '6.1.9',
},
'@react-navigation/native-stack': {
singleton: true,
eager: true,
requiredVersion: '6.9.17',
},
'@react-navigation/bottom-tabs': {
singleton: true,
eager: true,
requiredVersion: '6.5.11',
},
'react-native-screens': {
singleton: true,
eager: true,
},
'react-native-gesture-handler': {
singleton: true,
eager: true,
},
'react-native-flipper-zustand': {
...Repack.Federated.SHARED_REACT_NATIVE,
requiredVersion: '3.0.1',
},
'react-native-mmkv': {
...Repack.Federated.SHARED_REACT_NATIVE,
},
'native-base': {
singleton: true,
eager: true,
},
'react-native-svg': {
...Repack.Federated.SHARED_REACT_NATIVE,
requiredVersion: '13.14.0',
},
'react-native-safe-area-context': {
...Repack.Federated.SHARED_REACT_NATIVE,
singleton: true,
eager: true,
requiredVersion: '4.7.2',
},
'react-native-webview': {
...Repack.Federated.SHARED_REACT_NATIVE,
},
'react-i18next': {
...Repack.Federated.SHARED_REACT_NATIVE,
},
i18next: {
...Repack.Federated.SHARED_REACT_NATIVE,
},
'lottie-react-native': {
singleton: true,
eager: true,
},
'react-native-reanimated': {
...Repack.Federated.SHARED_REACT_NATIVE,
},
'react-native-screens': {
...Repack.Federated.SHARED_REACT_NATIVE,
singleton: true,
eager: true,
requiredVersion: '3.27.0',
},
},
}),
],
};
};
from repack.
@jbroma yes, I did tried in the super-app-showcase and got the same error. Thank you.
from repack.
Hi @nazrighazi-cd,
I've investigated the matter inside of super-app-showcase
and found the following solution:
- add
react-native-calendars
to the host-app - add
react-native-calendars
to shared modules (with eager: true inside of host-app) - in
index.js
I've added the following just below the import statements:
require.include('react-native-calendars')
The require.include
statement makes sure the library get's included with the host-app's module and is properly shared with the rest of the super-app. This needs to be done because react-native-calendars
is not used anywhere in the host-app itself.
Let me know whether that helps with your case
from repack.
Hi @jbroma,
Thank you for the solution. Seems like on my app it was because of the momentjs library. I did follow the same step as you mentioned above but still getting the issue.
And for the super-app-showcase, seems like it's working on the calendar page. However, when i navigate to account page in booking, I'm getting the same error as before.
same step as before,which is
booking home page -> shopping home page -> booking calendar page -> booking account page = error.
from repack.
Hi @jbroma ,
Some update on my end.
Found out that the error on my app is because of number of screens I declared in mfe main navigation.
I tried on super-app-showcase and seems like getting the same error.
Below is the step to recreate the error
- Create multiple screens in booking mfe, in my case I created 10 screens. In the screens, i used the useeffect function.
- Add all the screens in booking main navigation
- Navigate between mfe screens will return error
booking home page -> shopping home page -> booking calendar == error
Is there any limitation on the number of screens on the mfe? or is there any solution for this issue?
from repack.
This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.
from repack.
This issue has been automatically closed because it has been inactive for more than 14 days. Please reopen if you want to add more context.
from repack.
Related Issues (20)
- ERROR while setting up code signing HOT 2
- Issue with node v22.0.0 HOT 4
- Error: repack react native module was not found. Did you forget to update native dependencies? HOT 7
- TypeError: webpackContext.u is not a function (it is undefined)
- Property SentryError doesnt exist HOT 3
- ChunkLoad Error HOT 5
- bundling mini-apps cause crashes HOT 19
- How to config webpack to reuse existing dependencies from the main bundle HOT 4
- How to debug blank screen issue with no error output? HOT 25
- Question: getting the error: "File assets/images/<imageName>@3x.png for ios not found in compilation assets" HOT 5
- ChunkManagerPackage: No value passed for parameter 'p6' HOT 11
- More control over file path and URL for remote assets HOT 14
- Module Federation host app not working [ScriptManager] failed to load script : [NetworkFailure] HOT 2
- Error: Unhandled error. ([ScriptManager] Failed to load script:) HOT 3
- Update docs related to Expo on Usage docs page HOT 1
- Error: Unhandled error. ([ScriptManager] Failed to load script:) HOT 1
- [webpack-cli] RangeError: Maximum call stack size exceeded HOT 4
- Error : TypeError: Cannot read properties of undefined (reading 'forEach') HOT 6
- Error: no such file or directory, open '/Users/x/dev/client/packages/app/node_modules/react-native/Libraries/LogBox/Data/LogBoxData.js'"
- Error: Property 'SHA1' doesn't exist when using otpauth library HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from repack.