Closed Mitchell-Flaherty closed 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
?
@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.
@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)
@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:
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
└─────────────────────────────────────────────────────────────────┘
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
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]
6. It packaged and worked and we could see the sample app and could interact with the button.
7. Next we followed the steps I previously explained in my initial post, only we `rnv run -p webos -t <webos_tv_name>` to deploy straight to the TV instead and the same issue occurs.
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
@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?
@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.
I am currently facing the same problem. Have you been able to find a solution?
@RobertArissen not yet
Hello @Mitchell-Flaherty @RobertArissen,
The problem went away when I installed @react-navigation/routers
and @react-navigation/elements
.
Let me know if you need help.
renative.json
file:
{
"$schema": ".rnv/schema/rnv.project.json",
"extendsTemplate": "@rnv/template-starter/renative.json",
"projectName": "test",
"workspaceID": "rnv",
"templateConfig": {
"name": "@rnv/template-starter",
"version": "1.2.0"
},
"defaults": {
"supportedPlatforms": ["web", "ios", "android", "webos"]
},
"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",
"@react-navigation/routers": "source:rnv",
"@react-navigation/elements": "source:rnv"
}
}
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:
rnv new
in the terminal and create a new project using the starter template and include webos in the available platforms."@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
npm install
after saving."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" }
src/app/index.tsx
and add the following anywhere in the importsimport { createNativeStackNavigator } from "@react-navigation/native-stack"; const Stack = createNativeStackNavigator();
npx rnv build -p webos
which should build an ipk file which can be found atplatformBuilds/webos/outputs/
Expected behavior Creating the stackNavigator works as it does on the simulator and allows for navigation.
Screenshots or copy&paste
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!