search

flexn-io / renative

🚀🚀🚀 Unified Development Platform for iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms
https://renative.org
MIT License
1.8k stars 180 forks source link

[WebOS] @reactNavigation createStackNavigator() causes crash on physical LG webos device but works on Simulator #1649

Open Mitchell-Flaherty opened 1 month ago

Mitchell-Flaherty commented 1 month ago

Describe the bug Trying to add react navigation to a new project to run on WebOs and the app crashes and goes to a blank screen when deployed to a physical webos device with the following error in the debugger: Uncaught SyntaxError: Unexpected token '?' The error specifically happens when the following code is called: import { createNativeStackNavigator } from "@react-navigation/native-stack"; const Stack = createNativeStackNavigator(); I have added all the correct packages to the package.json as well as going through and adding the plugins to renative.json but nothing has changed, the navigator works fine on a Simulator and functions as expected.

To Reproduce Steps to reproduce the behavior:

  1. Run rnv new in the terminal and create a new project using the starter template and include webos in the available platforms.
  2. Once project is initialised cd into the project and install the following packages: (Either add these to you package.json or use npm commands to install them) "@react-navigation/bottom-tabs": "6.5.19", "@react-navigation/core": "6.4.15", "@react-navigation/native": "6.1.16", "@react-navigation/native-stack": "6.9.25", "@react-navigation/stack": "6.3.28", "react-native-gesture-handler": "2.16.2", "react-native-reanimated": "3.11.0", "react-native-safe-area-context": "4.10.3", "react-native-screens": "3.29.0", "react-refresh": "^0.14.2" //This seems to have to be installed separately as its included in the project but not the package.json
  3. If you added these to package.json run npm install after saving.
  4. Now add all of these to the plugins in renative.json like so: "plugins": { "@rnv/renative": "source:rnv", "react": "source:rnv", "react-art": "source:rnv", "react-dom": "source:rnv", "react-native-gesture-handler": "source:rnv", "@react-native-community/cli": "source:rnv", "react-native": "source:rnv", "next": "source:rnv", "react-native-web": "source:rnv", "@react-navigation/core": "source:rnv", "@react-navigation/bottom-tabs": "source:rnv", "@react-navigation/native": "source:rnv", "@react-navigation/native-stack": "source:rnv", "@react-navigation/stack": "source:rnv", "react-native-safe-area-context": "source:rnv", "react-native-screens": "source:rnv", "react-native-reanimated": "source:rnv" }
  5. Then go to src/app/index.tsx and add the following anywhere in the imports import { createNativeStackNavigator } from "@react-navigation/native-stack"; const Stack = createNativeStackNavigator();
  6. Save the file and in the terminal run npx rnv build -p webos which should build an ipk file which can be found at platformBuilds/webos/outputs/
  7. Deploy the ipk to a physical device and you will encounter a black screen after the splash screen with the error.

Expected behavior Creating the stackNavigator works as it does on the simulator and allows for navigation.

Screenshots or copy&paste image Screenshot 2024-08-07 at 10 39 07

Desktop (please complete the following information):

Additional context There were a lot of issues i encountered when setting up the environment with connecting to the webOs sdk and simulator and i have to first install the app on the simulator before i can run rnv run -p webos to deploy the app to the simulator and debug but i don't think that explains this issue but i think is worth mentioning Also the plugins state that its compatible with webos.

Thanks for reading, hope someone can help!

pauliusguzas commented 1 month ago

@Mitchell-Flaherty hello, thanks for thorough description, what do you mean by i have to first install the app on the simulator before i can run rnv run -p webos to deploy the app to the simulator and debug. So you build ipk using rnv build -p webos, you install it to device and then do rnv run -p webos?

Mitchell-Flaherty commented 1 month ago

@pauliusguzas Hey thanks for the quick reply! Yes but thats just for the Simulator, sometimes the rnv run -p webos just wouldn't deploy to the Simulator so i had to click "App" on the webOs Simulator and install the webOs platformBuilds folder as it doesn't take the IPK on the Simulator, and once i do that rnv run -p webos runs as expected, and calling createStackNavigator() works and i can use react-navigation without issue.

But for where the issue is happening, i build using rnv run -p webos and then install the IPK file onto an LG WebOS tv and it crashes if createStackNavigator() is included.

pauliusguzas commented 1 month ago

@Mitchell-Flaherty there are few things which maybe are causing issue for you, rnv run by default creates debug scheme build (metro is neccessery) and installs it to whatever device or simulator and launches it. rnv build by default creates debug scheme build and thats it. To successfully run it, you need to install it to device or sim and then start metro bundler, which can be done by rnv start. If you want release scheme app built which can be ran without metro (ofcourse you can't debug) you can do rnv run -p webos -s release.

Also the reason why you aren't getting app installed on sim using rnv run -p webos sometimes is that webos simulator must be closed in order for rnv to successfully install the app (this is also shown in cli)

info: Launched app on webOS TV simulator webOS_TV_24_Simulator_1.4.1. If you do not see the app opening please close the simulator and try again.

The easiest way to install app on tv would be to do rnv run -p webos -t <webos_tv_name>. webos tv name is the name which webos sdk names it. Usually it is webOS_TV. Ofcourse before running this command make sure that your tv is connected to you webos sdk on computer.

Next what I would ask you to do is to try install blank template starter to your tv and check if it works (please write down exact steps how did you install it). If it does then please try with install app on same tv with your plugins added (again add steps how did you install if they are different)

Mitchell-Flaherty commented 1 month ago

@pauliusguzas thanks for explaining, i did think there may have been missing bundles and that might be the issue.

To successfully run it, you need to install it to device or sim and then start metro bundler, which can be done by rnv start. If you want release scheme app built which can be ran without metro (ofcourse you can't debug) you can do rnv run -p webos -s release.

Though I tried rnv run -p webos -s release and that builds to a simulator, later on in what im about to send we did rnv run -p webos -t TV release which sent the IPK to the tv but still didn't work when it came to my issue.

Also the reason why you aren't getting app installed on sim using rnv run -p webos sometimes is that webos simulator must be closed in order for rnv to successfully install the app (this is also shown in cli) Ah okay that makes sense, closing the simulator and running again does sort the issue 100% of the time thanks!

Next what I would ask you to do is to try install blank template starter to your tv and check if it works (please write down exact steps how did you install it). If it does then please try with install app on same tv with your plugins added (again add steps how did you install if they are different)

Okay we tried this to no avail im afraid. To start we:

  1. We freshly installed Rnv using npm install rnv -g 
    
mitchellflaherty@Mitchells-MacBook-Pro ~ % npm install rnv -g
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'commander@12.1.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated rimraf@2.6.2: Rimraf versions prior to v4 are no longer supported

added 184 packages, and audited 185 packages in 8s

29 packages are looking for funding run npm fund for details

found 0 vulnerabilities

NOTE: We were having issue with the debugger so we downgraded node but subsiquently upgraded it back to @20 before running the next commands.

2. We then ran `rnv new`, We used starter template, We extended template
```shell
mitchellflaherty@Mitchells-MacBook-Pro Workspaces % rnv new

┌─────────────────────────────────────────────────────────────────┐
│ ██████╗ ███████╗███╗   ██╗ █████╗ ████████╗██╗██╗   ██╗███████╗ │
│ ██╔══██╗██╔════╝████╗  ██║██╔══██╗╚══██╔══╝██║██║   ██║██╔════╝ │
│ ██████╔╝█████╗  ██╔██╗ ██║███████║   ██║   ██║██║   ██║█████╗   │
│ ██╔══██╗██╔══╝  ██║╚██╗██║██╔══██║   ██║   ██║╚██╗ ██╔╝██╔══╝   │
│ ██║  ██║███████╗██║ ╚████║██║  ██║   ██║   ██║ ╚████╔╝ ███████╗ │
│ ╚═╝  ╚═╝╚══════╝╚═╝  ╚═══╝╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═══╝  ╚══════╝ │
│ 🚀 v:1.0.0 | renative.org | 08/08/2024, 11:53:38                │
│ $ rnv new                                                       │
└─────────────────────────────────────────────────────────────────┘
info: Current engine: @rnv/engine-core (/opt/homebrew/lib/node_modules/rnv/node_modules/@rnv/engine-core/lib)
task: ○ new ↺1
? What's your project Name? (folder will be created) hello-renative
? What workspace to use? rnv
? What template to use? @rnv/template-starter - Multiplatform 'hello world' template
✔ Executing: npm view @rnv/template-starter versions
✔ Executing: npm dist-tag ls @rnv/template-starter
? What @rnv/template-starter version to use? 1.0.0 (@latest)
✔ Executing: npm add @rnv/template-starter@1.0.0 --dev
✔ Executing: npm add @rnv/config-templates@1.0.0 --dev
? How to create config renative.json? Extend template (cleaner, overridable)
? What's your project Title? My Renative App
? What's your App ID? com.mycompany.hellorenative
? What's your project version? 0.1.0
? What platforms would you like to use? web, ios, android, webos
? Do you want to set-up git in your new project? No
info: Missing directory ./hello-renative/buildHooks.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/src/app.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/src/entry.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/src/config.tsx.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/index.js.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/tsconfig.json.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/babel.config.js.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/typings.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/appConfigs/app.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/appConfigs/base/assets.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/appConfigs/base/fonts.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/Gemfile.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/metro.config.js.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/react-native.config.js.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/next.config.js.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/next-env.d.ts.js. COPYING from TEMPLATE...DONE
info: Missing directory ./hello-renative/src/pages.js. COPYING from TEMPLATE...DONE
info: Missing file ./hello-renative/webpack.config.js.js. COPYING from TEMPLATE...DONE
info: .rnv folder missing. CREATING...DONE
info: .rnv/schemas folder missing. CREATING...DONE
info: Updating appConfig app with title: My Renative App and id: com.mycompany.hellorenative
? To avoid the issue with the resolving peer dependencies .npmrc file with content: "legacy-peer-deps=true" will be added to your project Yes
? You do not have any engines installed. Do you want to install them now? Yes
✔ Executing: npm add @rnv/engine-rn-next@1.0.0 --dev
✔ Executing: npm add @rnv/engine-rn@1.0.0 --dev
✔ Executing: npm add @rnv/engine-rn-web@1.0.0 --dev
? Project is ready. Do you want to install all dependencies now? Yes
✔ Executing: npm install
task: ✔ new
┌─────────────────────────────────────────────────────────────────┐
│ ✔ SUMMARY | 08/08/2024, 11:55:49 | rnv@1.0.0                    │
│ $ rnv new                                                       │
├─────────────────────────────────────────────────────────────────┤
│ Project: hello-renative@0.1.0                                   │
│ Workspace: rnv                                                  │
│ Engine: @rnv/engine-core                                        │
│ Template: @rnv/template-starter                                 │
│ Build Scheme (-s): debug                                        │
│ Env Info: darwin | arm64 | node v20.16.0                        │
│ Executed Time: 0h:2m:10s:392ms                                  │
│ 
  Generated Project Summary:
  -------------------------
  Project Name (--projectName): hello-renative
  Package name: hello-renative
  Project Version (--appVersion): 0.1.0
  Workspace (--workspace): rnv
  App Title (--title): My Renative App
  App ID (--id): com.mycompany.hellorenative
  Project Template (--template): @rnv/template-starter@1.0.0
  Git Enabled (--gitEnabled): false
  Enabled Platforms: web, ios, android, webos
  -------------------------
  ✔ Your project is ready! Run it with:

  cd hello-renative
  npx rnv run
│ You are trying to run global rnv command in your current project.
│ This might lead to unexpected behaviour.
│ Run your rnv command with npx prefix:
│ npx rnv new
└─────────────────────────────────────────────────────────────────┘
  1. We cd hello-renative, we then have to run npm install react-refresh 
    
mitchellflaherty@Mitchells-MacBook-Pro hello-renative % npm install react-refresh

added 1 package, removed 4 packages, changed 1 package, and audited 1666 packages in 1s

245 packages are looking for funding run npm fund for details

5 high severity vulnerabilities

To address all issues, run: npm audit fix --force

Run npm audit for details.

4. We use Ares to connect to the tv properly using ssh
```shell
mitchellflaherty@Mitchells-MacBook-Pro hello-renative % ares-setup-device                                                                                 
name          deviceinfo                   connection  profile
------------  ---------------------------  ----------  -------
TV (default)  prisoner@192.168.1.135:9922  ssh         tv     
emulator      developer@127.0.0.1:6622     ssh         tv     

** You can modify the device info in the above list, or add new device.
? Select modify
? Select a device TV
? Enter Device IP address: 192.168.1.135
? Enter Device Port: 9922
? Enter ssh user: prisoner
? Enter description: LG TV
? Select authentication ssh key
? Enter ssh private key file name: TV_webos
? Enter key's passphrase: 0C45D2
? Save ? Yes
name          deviceinfo                   connection  profile
------------  ---------------------------  ----------  -------
emulator      developer@127.0.0.1:6622     ssh         tv     
TV (default)  prisoner@192.168.1.135:9922  ssh         tv
  1. We then ran rnv run -p webos -t <webos_tv_name> 
    
mitchellflaherty@Mitchells-MacBook-Pro hello-renative % npx rnv run -p webos -t TV

┌─────────────────────────────────────────────────────────────────┐ │ ██████╗ ███████╗███╗ ██╗ █████╗ ████████╗██╗██╗ ██╗███████╗ │ │ ██╔══██╗██╔════╝████╗ ██║██╔══██╗╚══██╔══╝██║██║ ██║██╔════╝ │ │ ██████╔╝█████╗ ██╔██╗ ██║███████║ ██║ ██║██║ ██║█████╗ │ │ ██╔══██╗██╔══╝ ██║╚██╗██║██╔══██║ ██║ ██║╚██╗ ██╔╝██╔══╝ │ │ ██║ ██║███████╗██║ ╚████║██║ ██║ ██║ ██║ ╚████╔╝ ███████╗ │ │ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═══╝ ╚══════╝ │ │ $ npx rnv run -p webos -t TV │ └─────────────────────────────────────────────────────────────────┘ info: Current platform: webos info: Current engine: @rnv/engine-rn-web (./node_modules/@rnv/engine-rn-web) task: ○ run ↺1 info: Current platform: webos task: ○ configure ↺1 task: ○ platform configure ↺1 task: ○ project configure ↺1 task: ○ workspace configure ↺1 task: ✔ workspace configure task: ○ app configure ↺1 info: Current app config: app task: ✔ app configure info: ./node_modules/@react-native-community/cli-platform-ios/build/tools/listIOSDevices.js overriden by: /@rnv/config-templates/pluginTemplates/@react-native-community/cli-platform-ios/overrides@11.3.7.json info: ./node_modules/@react-native-community/cli/build/bin.js overriden by: /@rnv/config-templates/pluginTemplates/@react-native-community/cli/overrides.json info: Plugin overrides disabled for: react-native-reanimated with disablePluginTemplateOverrides. SKIPPING task: ✔ project configure info: Current Build Scheme: debug info: Current platform: webos task: ○ sdk configure ↺1 task: ✔ sdk configure task: ✔ platform configure info: Found custom assetSources at ./node_modules/@flexn/assets-renative-outline/assets/webos. Will be used to generate assets. task: ✔ configure info: Your webos devServer at port 8088 is not running. Starting it up for you... info: Your webos devServerHost 127.0.0.1 at port 8088 is not running. Starting it up for you... ┌─────────────────────────────────────────────────────────────────┐ │ ✔ BUNDLER STARTED | 08/08/2024, 12:20:55 | rnv@ │ │ $ npx rnv run -p webos -t TV │ ├─────────────────────────────────────────────────────────────────┤ │ Project: hello-renative@0.1.0 │ │ Workspace: rnv │ │ Platform (-p): webos │ │ Engine: @rnv/engine-rn-web │ │ Template: @rnv/template-starter │ │ App Config (-c): app │ │ Build Scheme (-s): debug │ │ Target (-t): TV │ │ Supported Platforms: web, ios, android, webos │ │ Env Info: darwin | arm64 | node v20.16.0 │ │ Executed Time: 0h:0m:0s:579ms │ │ Project location: ./platformBuilds/app_webos │ └─────────────────────────────────────────────────────────────────┘ (node:16083) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use node --trace-deprecation ... to show where the warning was created) (node:16083) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. Starting the development server...

Compiled successfully!

You can now view hello-renative in the browser.

Local: http://localhost:8088 On Your Network: http://192.168.1.164:8088

Note that the development build is not optimized. To create a production build, use npm run build.

assets by path static/ 3.46 MiB asset static/js/bundle.js 3.15 MiB [emitted] (name: main) 1 related asset asset static/media/Inter-Light.58a136ec3193fa8a63e5.ttf 303 KiB [emitted] [immutable] [from: appConfigs/base/fonts/Inter-Light.ttf] (auxiliary name: main) asset static/media/logo.63d54a55b067ffc3e842.png 12.1 KiB [emitted] [immutable] [from: platformAssets/runtime/logo.png] (auxiliary name: main) asset index.html 1.88 KiB [emitted] asset asset-manifest.json 356 bytes [emitted] runtime modules 28.8 KiB 14 modules modules by path ./node_modules/ 2.63 MiB 651 modules modules by path ./platformAssets/ 3.26 KiB (javascript) 12.1 KiB (asset) javascript modules 3.18 KiB ./platformAssets/runtime/fontManager.web.js 1.96 KiB [built] [code generated] ./platformAssets/runtime/fonts.web.js 1.21 KiB [built] [code generated] ./platformAssets/renative.runtime.json 46 bytes [built] [code generated] ./platformAssets/runtime/logo.png 42 bytes (javascript) 12.1 KiB (asset) [built] [code generated] modules by path ./src/ 15 KiB ./src/entry/index.web.tsx 1.46 KiB [built] [code generated] ./src/app/index.tsx 6.28 KiB [built] [code generated] ./src/config.tsx 7.26 KiB [built] [code generated] ./index.js 1010 bytes [built] [code generated] ./package.json 1.1 KiB [built] [code generated] ./appConfigs/base/fonts/Inter-Light.ttf 42 bytes (javascript) 303 KiB (asset) [built] [code generated] webpack 5.93.0 compiled successfully in 1683 ms No issues found. ✔ Executing: "/opt/webOS_TV_SDK/CLI/bin/ares-package" -o "/Users/jamie/Workspaces/hello-renative/platformBuilds/app_webos/output" "/Users/jamie/Workspaces/hello-renative/platformBuilds/app_webos" -n ✔ Executing: "/opt/webOS_TV_SDK/CLI/bin/ares-device-info" -D ✔ Executing: "/opt/webOS_TV_SDK/CLI/bin/ares-install" --device TV "/Users/jamie/Workspaces/hello-renative/platformBuilds/app_webos/output/com.mycompany.hellorenative_0.1.0_all.ipk" ✔ Executing: "/opt/webOS_TV_SDK/CLI/bin/ares-launch" --device TV com.mycompany.hellorenative Compiling... Compiled successfully!

You can now view hello-renative in the browser.

Local: http://localhost:8088 On Your Network: http://192.168.1.164:8088

Note that the development build is not optimized. To create a production build, use npm run build.

assets by status 317 KiB [cached] 3 assets assets by status 4.27 MiB [emitted] assets by chunk 4.27 MiB (name: main) asset static/js/bundle.js 3.71 MiB [emitted] (name: main) 1 related asset asset main.b362606bebd5b6fd41c8.hot-update.js 577 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset assets by path .json 509 bytes asset asset-manifest.json 481 bytes [emitted] asset main.b362606bebd5b6fd41c8.hot-update.json 28 bytes [emitted] [immutable] [hmr] Entrypoint main 4.27 MiB (4.26 MiB) = static/js/bundle.js 3.71 MiB main.b362606bebd5b6fd41c8.hot-update.js 577 KiB 4 auxiliary assets cached modules 2.64 MiB (javascript) 315 KiB (asset) [cached] 660 modules runtime modules 28.8 KiB 14 modules orphan modules 20 bytes [orphan] 2 modules modules by layer 417 KiB modules by path ./node_modules/@react-navigation/ 328 KiB 116 modules modules by path ./node_modules/core-js/ 9.03 KiB 12 modules modules by path ./node_modules/react-native-safe-area-context/lib/module/.js 19.6 KiB 6 modules modules by path ./node_modules/@babel/runtime/ 11.9 KiB ./node_modules/@babel/runtime/regenerator/index.js 448 bytes [built] [code generated]

One other thing that might be worth mentioning is that we are using webOS TV CLI Version: 1.12.4-j27 instead of the most recent version as rnv doesn't seem to pick up the new version as its no longer WebOS TV CLI and is now called webos_tools

pauliusguzas commented 1 month ago

@Mitchell-Flaherty so if I understand correctly plain template is installed successfully on your tv, but after you add in main comment noted packages, then you get the issue?

Mitchell-Flaherty commented 1 month ago

@pauliusguzas Yes thats correct, the app runs with the packages installed, but when you call import { createNativeStackNavigator } from "@react-navigation/native-stack"; const Stack = createNativeStackNavigator(); thats when i get the issue.