You.i React Native Issues

The following sections contain troubleshooting information:

You.i CLI Issues
You.i React Native App Build Issues
You.i React Native Design Issues

You.i CLI Issues

Issue: You.i CLI Fails With async() Error

Installation of a You.i TV package fails with the following output:

My-Mac:~ me$ youi-tv install
/Users/me/.config/yarn/global/node_modules/youi-cli/yi-cli.js:102
var a = async () => {
^
SyntaxError: Unexpected token (
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)```

Causes

You are using an older version of Node. You.i React Native supports Node versions 12.10 to 12.x.

Corrective actions

Upgrade Node.js to the latest version:

brew upgrade node

Issue: You.i CLI Command Not Found

Installation on Linux succeeds but youi-tv command fails as follows:

yarn global add youi-cli
yarn global v1.7.0
[1/4] Resolving packages...
⠁ (node:17875) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "youi-cli@1.1.6" with binaries:
   - youi-tv
   - create-youi-react-native-app
Done in 9.29s.
youi-tv --help
youi-tv: command not found

Causes

Your PATH variable does not contain the location youi-tv executables.

Corrective Actions

Add $PATH:$(yarn global bin) to the PATH variable.

Issue: You.i Platform Node Incompatible With the Installed Module

yarn global add youi-cli or yarn global upgrade youi-cli gives the following error on Linux:

yarn global upgrade youi-cli
yarn global v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
error youi-cli@2.2.2: The engine "node" is incompatible with this module. Expected version ">=9.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.

Causes

The node installed on Linux is old.

Corrective actions

Uninstall node from Linux.
Install Linuxbrew.
Install node using brew install node

Issue: youi-tv Command Not Found on Windows 10

Affected target platforms: Windows 10

Causes

One of the following issues may be the cause of the problem:

Missing an environment variable that points to %APP DATA%\npm.
PATH variable too long and unable to append.

Solution

Create a new environment variable called NODE_PATH and set its value as %APP DATA%\npm. Re-open the command prompt or Windows powershell, then run the youi-tv command.

You.i React Native App Build Issues

Issue: Missing Signing Certificates

Affected target platforms: macOS

Symptoms

Command line build fails with the following output:

Check dependencies
No signing certificate "Mac Development" found:  No "Mac Development" signing certificate matching team ID "<Team ID>" with a private key was found.

Causes

Apple signing certificates are not correctly configured.

Corrective Action

Verify that your Apple Developer account:
- Is a member of a valid development team
- Has all required valid profiles
- Has all required valid signing certificates See Installing Xcode.
If your Apple Developer account is correctly configured, you can use our CLI to generate the Xcode project, then build directly in Xcode. This approach automatically applies the certificate. To generate the Xcode project without building from the command line, run the following from your app’s top-level folder: youi-tv generate -p osx To build directly in Xcode, see Building and Running the App in Xcode. After building the app in Xcode, future command line builds succeed.

Issue: React-native Command Not Found

Affected target platforms: All

Symptoms

When using youi-tv build with --local to build a You.i React Native app with a JS bundler, command line build fails with the following output:

#==============================================
Bundle JS command:
react-native bundle --platform ios --dev false --minify true --entry-file
../My_RN_App/index.youi.js --bundle-output
../My_RN_App/youi/build/osx/Debug/assets/jsbundles/index.youi.bundle
#==============================================
Bundle JS failed.
make: *** [../My_RN_App/youi/build/osx//CMakeFiles/YiReactNativeApp_BundleJS] Error 1
Command /bin/sh failed with exit code 2

** BUILD FAILED **

The following build commands failed:
PhaseScriptExecution CMake\ Rules allinone/osx/YiReactNativeApp/youi/ReactNative.build/Debug/YiReactNativeApp_BundleJS.build/Script-3CF961BBECFD4E38A145735D.sh
(1 failure)

Navigating to the app directory and running the failed command fails with the following output:

YiReactNativeApp$ react-native bundle --platform ios --dev false --minify true --entry-file
../My_RN_App//index.youi.js --bundle-output
../My_RN_App/youi/build/osx/Debug/assets/jsbundles/index.youi.bundle
-bash: react-native: command not found

Causes

Required react-native CLI extensions are missing.

Corrective actions

Run the following command:

yarn global add react-native-cli

Issue: Yarn Add Command Not Found

Affected target platforms: Linux, Roku

Symptoms

Building from a Linux development platform (Ubuntu 17) fails with the following output:

ERROR: [Errno 2] No such file or directory: ‘add’

Causes

By default, Ubuntu 17 comes with cmdtest and does not install yarn unless you first remove cmdtest.

Corrective actions

Verify which version of Ubuntu you are using:
```
lsb_release -a
```
If you are using Ubuntu 17, remove cmdtest: sudo apt remove cmdtest

Install yarn:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo \"deb https://dl.yarnpkg.com/debian/ stable main\" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Issue: Starting the Metro Bundler via Yarn Start Fails With Haste Module Error

Affected target platforms: all

Symptoms

Running yarn start fails with the following output:

Scanning folders for symlinks in /Path/To/Engine/samples/MyRNApp/node_modules (8ms)
┌────────────────────────────────────────────────────────────────────────┐
│                                                                        │
│  Running Metro Bundler on port 8081.                                   │
│                                                                        │
│  Keep Metro running while developing on any JS projects. Feel free to  │
│  close this tab and run your own Metro instance if you prefer.         │
│                                                                        │
│  https://github.com/facebook/react-native                              │
│                                                                        │
└────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
   /Path/To/Engine/samples/MyRNApp
   /Different/Path/To/Engine/react/react-native-youi
Metro Bundler ready.
Welcome to React Native! Learn once, write anywhere
warning: the transform cache was reset.
error: bundling failed: Error: Unable to resolve module `prop-types` from `/Different/Path/To/Engine/react/react-native-youi/js/ButtonRef.js`: Module `prop-types` does not exist in the Haste module map

Causes

You have multiple versions of You.i Platform and You.i React Native installed on your machine and the versions used by your project files have become misaligned. In the previous example, notice that the yarn server is looking for JS files in paths that point to different versions of You.i Platform: /Path/To/Platform/samples/MyRNApp and /Different/Path/To/Platform/react/react-native-youi.

Corrective actions

Navigate to /Different/Path/To/Engine/react/react-native-youi.
Run yarn unlink. This globally unlinks this version of the package.
Navigate to /Path/To/Engine/react/react-native-youi.
Run yarn link. This globally links this version of the package.
Navigate to /Path/To/Engine/samples/MyRNApp.
Run yarn link react-native-youi. This updates the link for this project to the new global one you established in Step 4.

Issue: Problems Starting App With Yarn

Affected target platforms: all

Symptoms

The app builds successfully, but various errors occur when starting the app with yarn start or yarn init.

For UWP builds, starting yarn fails with the following output:

Loading dependency graph, done.
warning: the transform cache was reset.
error: bundling failed: Error: Expected path `..\youiengine.0.999.37\libs\react-native-youi\index.js` to be relative to one of the project roots
at toLocalPath (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\node-haste\lib\toLocalPath.js:31:9)
at ModuleCache.getModule (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\node-haste\ModuleCache.js:97:20)
at ModuleResolver._getFileResolvedModule (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:170:42)
at ModuleResolver.resolveDependency (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:161:704)
at ResolutionRequest.resolveDependency (C:\Users\me\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:91:16)
at DependencyGraph.resolveDependency (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\node-haste\DependencyGraph.js:272:4579)
at dependencies.map.relativePath (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:374:16)
at ..\youiengine\5.0.999.37\MarksApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:212:33
BUNDLE  [ios, dev] ./index.youi.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

Causes

When building on Ubuntu, the build system needs node v8.11.2 or later. You may be using the wrong version of node.

Corrective actions

Verify that you are using the correct version of node:
1. Verify which version of node you are using:
```
node -v
```
1. If you are using the wrong version of node, upgrade:
```
sudo npm install -g n
sudo n lts -g
```
2. Verify that you are using the correct version of node:
```
node -v
```
For UWP builds:
1. Start yarn with the following command:
```
yarn start --root=%HOMEDRIVE%%HOMEPATH%\youiengine\<version installed>\libs\react-native-youi
```
  where is the You.i React Native package version installed.
2. If the issue persists, use a separate machine to host yarn. Both machines, the one hosting yarn and the one running the app, must be on the same network; that is, able to send and receive pings from each other.

Issue: App Launch Crash

Affected target platforms: UWP

Symptoms

Launching the app causes a crash with the following output:

m_pEngineSurfaceVisual->Size = Windows::Foundation::Numerics::float2((float)m_pSurface->GetWidth(), (float)m_pSurface->GetHeight());

Causes

Windows development was based on using Parallels on a Mac instead of a native Windows machine. This configuration is not supported because the Direct X surface cannot be created.

Corrective actions

Perform Windows development on a native Windows machine.

Issue: Unable to Resolve Module ‘react-native-youi’

Affected target platforms: macOS, iOS, tvOS, Android

Symptoms

When using --local to build a You.i React Native app with a JS bundler, command line build fails with the following output:

FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':TemplateProject:externalNativeBuildArm64-v8aDebug'.
> Build command failed.
Error while executing process /usr/local/Cellar/cmake/3.11.3/bin/cmake with arguments {--build /Users/<username>/My_RN_App/youi/build/android/project/TemplateProject/.externalNativeBuild/cmake/arm64-v8aDebug/arm64-v8a --target TemplateProject}
[1/5] cd /Users/username/My_RN_App/youi/build/android/project/TemplateProject/.externalNativeBuild/cmake/arm64-v8aDebug/arm64-v8a && /Users/username/.rbenv/versions/2.0.0-p648/bin/ruby /Users/username/youiengine/5.0.999.39/tools/workflow/bundlejs.rb ARGS --working_directory /Users/username/My_RN_App/youi/.. --output /Users/username/My_RN_App/youi/build/android/assets/assets/jsbundles --platform Android --input_files index.youi.js --minify --assets_dest /Users/username/My_RN_App/youi/build/android/assets
FAILED: CMakeFiles/BundleJS
cd /Users/username/My_RN_App/youi/build/android/project/TemplateProject/.externalNativeBuild/cmake/arm64-v8aDebug/arm64-v8a && /Users/username/.rbenv/versions/2.0.0-p648/bin/ruby /Users/username/youiengine/5.0.999.39/tools/workflow/bundlejs.rb ARGS --working_directory /Users/username/My_RN_App/youi/.. --output /Users/username/My_RN_App/youi/build/android/assets/assets/jsbundles --platform Android --input_files index.youi.js --minify --assets_dest /Users/username/My_RN_App/youi/build/android/assets
#==============================================
Bundle JS command:
react-native bundle --platform ios --dev false --minify true --entry-file /Users/username/My_RN_App/youi/../index.youi.js --bundle-output /Users/username/My_RN_App/youi/build/android/assets/assets/jsbundles/index.youi.bundle --assets-dest /Users/username/My_RN_App/youi/build/android/assets
#==============================================
Scanning folders for symlinks in /Users/username/My_RN_App/node_modules (16ms)
Scanning folders for symlinks in /Users/username/My_RN_App/node_modules (10ms)
Loading dependency graph, done.

Unable to resolve module `react-native-youi` from `/Users/username/My_RN_App/index.youi.js`: Module `react-native-youi` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

1. Clear watchman watches: `watchman watch-del-all`.
1. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
1. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
1. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

ninja: build stopped: sub-command failed.
* Try: Run with --stacktrace option to get the stack trace.
  Run with --info or --debug option to get more log output.
  Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 5s
17 actionable tasks: 1 executed, 16 up-to-date

Corrective actions

Run the following command from the React-Native app directory:

yarn start --reset-cache

The yarn server starts a process that should be stopped after it is finished loading.

Note If there is another instance of yarn running, you need to close it before you run the command.

Issue: HTTP Response Failure With Android Emulator

Affected target platforms: Android

Symptoms

Running an app on an Android emulator and having it connect to a Yarn server on the same computer causes the following error to appear:

Failed to receive http response from the server.

Causes

Android emulators run inside their own VM, so their localhost points to the VM instead of the yarn server.

Corrective actions

Run the following command:

adb reverse tcp:8081 tcp:8081

You should now be able to connect to your yarn server.

You.i React Native Design Issues

Issue: Failed to Load a Composition

Symptoms

You are getting “Failed to load a composition” when you are building a You.i React Native project.

Causes

It could be one of the following:

Assets have not been exported and copied properly.
App resources directory naming mismatch

Corrective Action

Try one of the following:

Ensure that the assets have been exported and copied correctly. By default, the build script takes care of it.
Verify the app resources directory for a given layout file, and ensure that their names are exact same. For example, ../assets/layout/tv/Main.layout and ../assets/layout/TV/Main.layout are different.