-
-
Notifications
You must be signed in to change notification settings - Fork 180
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WebOS] @reactNavigation createStackNavigator() causes crash on physical LG webos device but works on Simulator #1649
Comments
@Mitchell-Flaherty hello, thanks for thorough description, what do you mean by |
@pauliusguzas Hey thanks for the quick reply! Yes but thats just for the Simulator, sometimes the But for where the issue is happening, i build using |
@Mitchell-Flaherty there are few things which maybe are causing issue for you, Also the reason why you aren't getting app installed on sim using
The easiest way to install app on tv would be to do 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.
Though I tried
Okay we tried this to no avail im afraid.
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.
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
└─────────────────────────────────────────────────────────────────┘
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.
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
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]
+ 2 modules
modules by path ./node_modules/use-latest-callback/lib/src/*.js 2.29 KiB
./node_modules/use-latest-callback/lib/src/index.js 1.94 KiB [built] [code generated]
./node_modules/use-latest-callback/lib/src/useIsomorphicLayoutEffect.js 361 bytes [built] [code generated]
+ 8 modules
webpack 5.93.0 compiled successfully in 1899 ms
No issues found.
One other thing that might be worth mentioning is that we are using |
@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 |
I am currently facing the same problem. Have you been able to find a solution? |
@RobertArissen not yet |
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!
The text was updated successfully, but these errors were encountered: