callstack / super-app-example

This repository presents a compact super-app example from Callstack's blog, illustrating the use of a monorepo structure together with Re.Pack and Module Federation.
MIT License
27 stars 16 forks source link

Unable to load script. #9

Open shakeelkoper opened 1 month ago

shakeelkoper commented 1 month ago

Environment

node -v v20.15.1 "react-native": "^0.72.3",

Description

image

After Cloning Project yarn install yarn start yarn run:host-app:android getting below error: Unable to load script. make sure you're either running metro(run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release

Reproducible Demo

image
jbroma commented 1 month ago

Hi @shakeelkoper,

please try starting the host app with yarn react-native start --host 127.0.0.1 - the super app example was updated to V4 yet and this was one of the things we've fixed there.

shakeelkoper commented 1 month ago

Really Appreciate and Thanks for the Quick Reply Steps: Terminal 1: yarn start

image

Terminal 2: From Root Folder Navigating to cd packages/host-app and running yarn react-native start --host 127.0.0.1 able to run ios

image

but again for only android getting

image image image

@jbroma

jbroma commented 1 month ago

@shakeelkoper please use react-native webpack-start --host 127.0.0.1

shakeelkoper commented 1 month ago

after adding "start": "react-native webpack-start --host 127.0.0.1", in package.json host file and then running Steps(Running both the command on the root folder): Terminal 1: yarn start Terminal 2: yarn run:host-app:android I am able to run the App but when I click on Navigate to Mini App Button Getting below Error

image

@jbroma

shakeelkoper commented 1 month ago

@jbroma I have gone through multiple tickets raised on repack repo https://github.com/callstack/repack/issues/429 https://github.com/callstack/repack/issues/250 and was able to understand that I have to run adb reverse for mini app once it is started and I have done the same

image

but still I am getting same error where I am not able to navigate to mini app and throws below error

image

I also have the doubt why the identifiers for the adb reverse list is same but I am not able to wrap my head around it on my machine I am able to run HOST:->http://127.0.0.1:8081 and MINI->http://127.0.0.1:9000 on chrome browser but on emulator chrome I am only able to run http://127.0.0.1:8081 for http://127.0.0.1:9000 it is showing site is not reachable This issue is only happening for android simulator not for ios can you please help I have also upgraded to repack 4.1.1 still issue persist

jbroma commented 1 month ago

@shakeelkoper please also run the mini-app server with --host 127.0.0.1 - it's most likely the same issue. After upgrading it shouldnt be needed but maybe your forgot the adb reverse part? Kudos for finding this stuff out anyways!

shakeelkoper commented 1 month ago

@jbroma sorry to bother so much but repack has a great community and I appreciate your help very much. towards the community you guys are really doing charity If you check below even after adding adb reverse

image

and I am still getting the same error

image

below I have also shared the logs for yarn start

image

do I need to make changes to packages/mini-app/webpack.config.mjs @ Repack.plugins.ModuleFederationPlugin as you have mentioned in https://github.com/callstack/repack/issues/626 host-app->package.json->"start": "react-native webpack-start --host 127.0.0.1", mini-app->package.json->"start": "react-native webpack-start --host 127.0.0.1 --port 9001",