[tvOS] - Xcode build failing with babel/webpack/metro related errors

iAMkVIN-S commented 1 month ago

Describe the bug When trying to build for tvOS, the renative build succeeds, but the Xcode archive fails with syntax errors that seem related to babel/webpack/metro. However, no custom babel/webpack configuration has been added on our side.

tvOS simulator works fine. AndroidTV simulator works fine. AndroidTV build works fine.

To Reproduce 1. npx rnv build

2. Select tvos

3. When build succeeds, open RNVApp.xcworkspace

4. In Xcode, on the middle navigation menu, select target RNVApp-tvOS

5. At the top navigation menu, select tab General

6. Set the Display Name , Bundle Identifier, Version and Build

7. At the top navigation menu, select tab Signing & Capabilities and set your Team

8. Using the MacOS toolbar, select Product and then Archive to start the Xcode build

The build will fail with the following error: error SyntaxError: /Users/kevin/Documents/REPOS/jimmy/jstv/js-tv/src/app/index.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (32:5):

Upon following the instructions in the error and looking for a solution, there seems to be two steps to do:

9. Add a babel presets to your devDependencies using npm i @babel/preset-react --save-dev and npm i @babel/preset-flow --save-dev

10. Modify your babel.config.js :

const { withRNVBabel } = require('@rnv/adapter');

module.exports = withRNVBabel({
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    '@babel/preset-react',
    '@babel/preset-flow'
  ],
  plugins: []
});

11. Rebuild with steps 1 to 8

The build will now fail with the following error: error SyntaxError: /Users/kevin/Documents/REPOS/jimmy/jstv/js-tv/node_modules/react-native/index.js: Unexpected keyword 'typeof'. (14:7)

Upon following the instructions in the error and looking for a solution, there seems to be one step to do:

12. Modify your webpack.config.json :

const { withRNVWebpack } = require('@rnv/adapter');

module.exports = withRNVWebpack({
  externals: {
    "react-native": true,
  },
});

13. Rebuild with steps 1 to 8

The build will now fail with the following error: error Unable to resolve module missing-asset-registry-path from /Users/kevin/Documents/REPOS/jimmy/jstv/js-tv/src/assets/defaultThumbnail.jpg: missing-asset-registry-path could not be found within the project or in these directories:

Upon following the instructions in the error and looking for a solution, there seems to be two steps to do:

14: Add a metro dependencies npm i @react-native/metro-config --save-dev and npm i react-native-svg-transformer --save-dev

15: Modify your modify.config.json :

const { withRNVMetro } = require('@rnv/adapter');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

const {
  resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);

const customConfig = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

const mergedConfig = mergeConfig(defaultConfig, customConfig);

module.exports = withRNVMetro(mergedConfig);

16. Rebuild with steps 1 to 8

The build will now fail with the following error: error node_modules/react-native-svg/src/elements/Symbol.tsx: /Users/kevin/Documents/REPOS/jimmy/jstv/js-tv/node_modules/react-native-svg/src/elements/Symbol.tsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?.

Upon following the instructions in the error and looking for a solution, there seems to be one step to do:

17: Install missing dependencies from step 9 with npm i @babel/preset-env --save-dev and npm i @babel/preset-typescript --save-dev (my bad, we added them in the babel.config.json and I had not installed them)

18. Rebuild with steps 1 to 8

The build will now fail with the following error: private properties are not supported

At this point, I cannot find any working solutions, and feel as if I don't want to go too far off course from the default Renative setup. Any suggestions? How should the tvOS build normally go? Does renative have a functional demo app to compare to?

Expected behavior Xcode archive should succeed without any build errors.

Desktop and other information:

My renative.json /platforms/tvos:

"tvos": {
  "id": "com.test.test",
   "versionCode": "1",
   "version": "2024.10.08",
   "entryFile": "index.tvos.js",
   "bundleAssets": true,
   "assetFolderPlatform": "tvos"
}

OS: macOS Sonoma 14.1.1
Node Version v18.19.0
RNV Version 1.3.0

pauliusguzas commented 1 month ago

@iAMkVIN-S thanks for very detail description, will look into it and try to reproduce, as for now I see you are asking for demo app, so in renative monorepo there are 2 app packages, one is app-harness, the other is template-starter

iAMkVIN-S commented 1 month ago

@pauliusguzas Thank you for your prompt reply.

I will compare the template-starter from the monorepo to our current project configuration in the morning to see if anything is different. To my knowledge, we have not changed anything other than what I mentioned above in an attempt to fix the Xcode build issues.

As added information: Our project was originally created from the template-starter at version 1.0.0-rc.19

Please let me know how I can assist further in fixing the issue 🙏

iAMkVIN-S commented 1 month ago

@pauliusguzas Following up with last night's response:

I have tried matching the renative.json and /appConfigs/app/renative.json from the template-starter for the tvOS. I also have attempted builds at each step of cleaning up my above additions to the babel, webpack and metro configs.

Xcode builds are still failing with the same set of errors.

ChristopheSnacken commented 1 month ago

I have the same issue alas. Anyone figured it out already? I can run but not build

iAMkVIN-S commented 1 month ago

@ChristopheSnacken - Out of curiosity, did you get the same trail of errors/fixes as above?

Is your current build blocking error also the following:

ChristopheSnacken commented 1 month ago

With me it's mainly that metro is not picking up on .tvos extension. He is going for the standard index.js file instead of the index.tvos.js file. When I use the "run" instead of "build" command, and without the "-s release" it picks up the correct file extensions. `None of these files exist :

src/app(.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
src/app/index(.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx) 1 | import { AppRegistry } from 'react-native';

2 | import App from './src/app'; | ^ 3 | 4 | 5 | AppRegistry.registerComponent('RNVApp', () => App);.`

ElenaDiachenko commented 1 month ago

@iAMkVIN-S Hello. I can't reproduce this. Could you create a minimal reproducible example to help?

Note: entryFile points to the index.js file in the root of the project. Why did you try to change that?

iAMkVIN-S commented 3 weeks ago

@ElenaDiachenko I'm sorry for the delay, I was away last week.

To confirm, what should the value of entryFile be? Just index ?

I will work on trying to strip the project down for a reproducible example.

iAMkVIN-S commented 3 weeks ago

@ElenaDiachenko I'm sorry for the delay, I was away last week.

To confirm, what should the value of entryFile be? Just index ?

I will work on trying to strip the project down for a reproducible example.

Sorry for the confusion @ElenaDiachenko - It must have been between tries, I can confirm the errors above were happening with entryFile: index (that's what I currently had in my renative.json)

iAMkVIN-S commented 3 weeks ago

@ElenaDiachenko What's the best way to share a reproducible example with you privately?

RobertArissen commented 3 weeks ago

Can you try adding presets: ['module:metro-react-native-babel-preset'] to babel.config.js

iAMkVIN-S commented 3 weeks ago

@RobertArissen This seems to have fixed the issue.

After adding the above to my babel.config.js :

const { withRNVBabel } = require('@rnv/adapter');

module.exports = withRNVBabel({
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    '@babel/preset-react',
    '@babel/preset-flow',
    'module:metro-react-native-babel-preset'
  ],

  plugins: [
    '@babel/plugin-transform-class-properties',
    '@babel/plugin-transform-private-methods',
  ]
});

I have a successful build. Thank you so much.

How can we improve the documentation around the above (babel,webpack,metro files which needed modifications to build) as well as some other non-documented items such as the /appConfigs/app/assets required files and their folder/file names? There's a ton of guessing and trial and error right now.

Happy to help if needed.

iAMkVIN-S commented 3 weeks ago

@ElenaDiachenko // @RobertArissen

Although my Xcode Archive is now building from the suggestion above, when I try launching the tvOS App, it instantly crashes.

When attempting to run build on a Apple TV Simulator using `npx rnv run`:

It works. ✅

When attempting to run build on a Apple TV Simulator from Xcode:

Error in Xcode:

Full log in Xcode:

Logging Error: Failed to initialize logging system. Log messages may be missing. If this issue persists, try setting IDEPreferLogStreaming=YES in the active scheme actions environment variables.
nw_protocol_get_quic_image_block_invoke dlopen libquic failed: dlopen(/usr/lib/libquic.dylib, 0x0005): tried: '/Users/kevin/Library/Developer/Xcode/DerivedData/RNVApp-gpsanemgdszalzdaeuhrwoegvaie/Build/Products/Debug-appletvsimulator/libquic.dylib' (no such file), '/Library/Developer/CoreSimulator/Volumes/tvOS_21L569/Library/Developer/CoreSimulator/Profiles/Runtimes/tvOS 17.5.simruntime/Contents/Resources/RuntimeRoot/usr/lib/system/introspection/libquic.dylib' (no such file), '/Library/Developer/CoreSimulator/Volumes/tvOS_21L569/Library/Developer/CoreSimulator/Profiles/Runtimes/tvOS 17.5.simruntime/Contents/Resources/RuntimeRoot/usr/lib/libquic.dylib' (no such file), '/usr/lib/libquic.dylib' (no such file, not in dyld cache)
nw_socket_handle_socket_event [C1.1.1:2] Socket SO_ERROR [61: Connection refused]
nw_socket_handle_socket_event [C1.1.2:2] Socket SO_ERROR [61: Connection refused]
Connection 1: received failure notification
Connection 1: failed to connect 1:61, reason -1
Connection 1: encountered error(1:61)
Task <67B2338E-444E-4EA9-A901-502A926881DA>.<1> HTTP load failed, 0/0 bytes (error code: -1004 [1:61])
Task <67B2338E-444E-4EA9-A901-502A926881DA>.<1> finished with error [-1004] Error Domain=NSURLErrorDomain Code=-1004 "Could not connect to the server." UserInfo={_kCFStreamErrorCodeKey=61, NSUnderlyingError=0x600000c6ca80 {Error Domain=kCFErrorDomainCFNetwork Code=-1004 "(null)" UserInfo={_NSURLErrorNWPathKey=satisfied (Path is satisfied), interface: en0, _kCFStreamErrorCodeKey=61, _kCFStreamErrorDomainKey=1}}, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <67B2338E-444E-4EA9-A901-502A926881DA>.<1>, _NSURLErrorRelatedURLSessionTaskErrorKey=(
    "LocalDataTask <67B2338E-444E-4EA9-A901-502A926881DA>.<1>"
), NSLocalizedDescription=Could not connect to the server., NSErrorFailingURLStringKey=http://localhost:8081/status, NSErrorFailingURLKey=http://localhost:8081/status, _kCFStreamErrorDomainKey=1}
No bundle URL present.

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

When attempting to run build on a physical Apple TV from Xcode:

Error in Xcode:

Full log in Xcode:

tcp_input [C1:2] flags=[R.] seq=0, ack=2471346792, win=0 state=SYN_SENT rcv_nxt=0, snd_una=2471346791
Connection 1: received failure notification
Connection 1: failed to connect 1:61, reason -1
Connection 1: encountered error(1:61)
nw_connection_copy_connected_local_endpoint_block_invoke [C1] Client called nw_connection_copy_connected_local_endpoint on unconnected nw_connection
nw_connection_copy_connected_remote_endpoint_block_invoke [C1] Client called nw_connection_copy_connected_remote_endpoint on unconnected nw_connection
Task <0CD89390-2EA0-48FF-8006-935F20882522>.<1> HTTP load failed, 0/0 bytes (error code: -1004 [1:61])
Task <0CD89390-2EA0-48FF-8006-935F20882522>.<1> finished with error [-1004] Error Domain=NSURLErrorDomain Code=-1004 "Could not connect to the server." UserInfo={_kCFStreamErrorCodeKey=61, NSUnderlyingError=0x302b24ed0 {Error Domain=kCFErrorDomainCFNetwork Code=-1004 "(null)" UserInfo={_NSURLErrorNWPathKey=satisfied (Path is satisfied), viable, interface: en0, ipv4, ipv6, dns, _kCFStreamErrorCodeKey=61, _kCFStreamErrorDomainKey=1}}, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <0CD89390-2EA0-48FF-8006-935F20882522>.<1>, _NSURLErrorRelatedURLSessionTaskErrorKey=(
    "LocalDataTask <0CD89390-2EA0-48FF-8006-935F20882522>.<1>"
), NSLocalizedDescription=Could not connect to the server., NSErrorFailingURLStringKey=http://192.168.0.13:8081/status, NSErrorFailingURLKey=http://192.168.0.13:8081/status, _kCFStreamErrorDomainKey=1}
Running application RNVApp ({
    initialProps =     {
    };
    rootTag = 1;
})
tcp_input [C2:2] flags=[R.] seq=0, ack=2963506696, win=0 state=SYN_SENT rcv_nxt=0, snd_una=2963506695
Connection 2: received failure notification
Connection 2: failed to connect 1:61, reason -1
Connection 2: encountered error(1:61)
nw_connection_copy_connected_local_endpoint_block_invoke [C2] Client called nw_connection_copy_connected_local_endpoint on unconnected nw_connection
nw_connection_copy_connected_remote_endpoint_block_invoke [C2] Client called nw_connection_copy_connected_remote_endpoint on unconnected nw_connection
Task <E5486A3A-97EA-4D5D-82AF-E5A50CEA0508>.<2> HTTP load failed, 0/0 bytes (error code: -1004 [1:61])
Task <E5486A3A-97EA-4D5D-82AF-E5A50CEA0508>.<2> finished with error [-1004] Error Domain=NSURLErrorDomain Code=-1004 "Could not connect to the server." UserInfo={_kCFStreamErrorCodeKey=61, NSUnderlyingError=0x302b164f0 {Error Domain=kCFErrorDomainCFNetwork Code=-1004 "(null)" UserInfo={_NSURLErrorNWPathKey=satisfied (Path is satisfied), viable, interface: en0, ipv4, ipv6, dns, _kCFStreamErrorCodeKey=61, _kCFStreamErrorDomainKey=1}}, _NSURLErrorFailingURLSessionTaskErrorKey=LocalDataTask <E5486A3A-97EA-4D5D-82AF-E5A50CEA0508>.<2>, _NSURLErrorRelatedURLSessionTaskErrorKey=(
    "LocalDataTask <E5486A3A-97EA-4D5D-82AF-E5A50CEA0508>.<2>"
), NSLocalizedDescription=Could not connect to the server., NSErrorFailingURLStringKey=http://192.168.0.13:8081/status, NSErrorFailingURLKey=http://192.168.0.13:8081/status, _kCFStreamErrorDomainKey=1}
nw_socket_handle_socket_event [C3.1.1:1] Socket SO_ERROR [61: Connection refused]
nw_socket_handle_socket_event [C4.1.1:1] Socket SO_ERROR [61: Connection refused]
nw_socket_handle_socket_event [C3.1.2:1] Socket SO_ERROR [61: Connection refused]
nw_connection_get_connected_socket_block_invoke [C3] Client called nw_connection_get_connected_socket on unconnected nw_connection
TCP Conn 0x30147ce60 Failed : error 0:61 [61]
nw_socket_handle_socket_event [C4.1.2:1] Socket SO_ERROR [61: Connection refused]
nw_connection_get_connected_socket_block_invoke [C4] Client called nw_connection_get_connected_socket on unconnected nw_connection
TCP Conn 0x30147b340 Failed : error 0:61 [61]
nw_socket_handle_socket_event [C5.1.1:1] Socket SO_ERROR [61: Connection refused]
nw_socket_handle_socket_event [C5.1.2:1] Socket SO_ERROR [61: Connection refused]
nw_connection_get_connected_socket_block_invoke [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
TCP Conn 0x30147cd20 Failed : error 0:61 [61]
Unbalanced calls start/end for tag 19
Running "RNVApp" with {"rootTag":1,"initialProps":{}}
TypeError: undefined is not a function

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in RNVApp(RootComponent), js engine: hermes
TypeError: undefined is not a function

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in RNVApp(RootComponent), js engine: hermes
Running surface LogBox ({
    initialProps =     {
    };
    rootTag = 11;
})

iAMkVIN-S commented 3 weeks ago

Because of the discrepancy between the documentation pages for iOS and tvOS, is it possible to have confirmation on what commands should be ran in order to generate a tvOS build for:

Running on a simulator via Xcode
Running on a physical Apple TV via Xcode
Sending to Testflight

Also, can you confirm the appConfigs/app/renative.json platforms/tvos object?

I have countless combinations, most recently:

npx rnv export -p tvos -s release
Uploaded the RNVApp-tvOS.ipa via Transporter to Testflight

My current renative.json is:

"tvos": {
            "id": "com.real.bundleid",
            "versionCode": "1",
            "version": "2024.10.08",
            "entryFile": "index",
            "provisioningStyle": "Automatic",
            "entitlements": {},
            "includedPermissions": ["*"],
            "engine": "engine-rn-tvos",
            "schemeTarget": "RNVApp-tvOS",
            "deploymentTarget": "15.5",
            "reactNativeEngine": "hermes",
            "buildSchemes": {
                "debug": {
                    "runScheme": "Debug",
                    "bundleAssets": false
                },
                "test": {
                    "runScheme": "Debug",
                    "bundleAssets": false,
                    "sdk": "appletvsimulator"
                },
                "release": {
                    "runScheme": "Release",
                    "bundleAssets": true,
                    "bundleIsDev": false,
                    "teamID": "<real team id>",
                    "exportOptions": {
                      "method": "app-store",
                      "uploadBitcode": false,
                      "compileBitcode": false,
                      "uploadSymbols": true,
                      "signingStyle": "automatic",
                      "signingCertificate": "Apple Development"
                    }
                }
            }
        }

However, the build still crashes on launch.

Thank you very much!

RobertArissen commented 2 weeks ago

I think I may have found the problem. It appears that none of the RNV environment variables work with rnv build for TVOS as RNV_ENGINE_PATH is undefined. However, when I use rnv run the environment variable RNV_ENGINE_PATH does exist. This might explain why the dev run works but creating a build does not.

How can we resolve this? @Marius456 @ElenaDiachenko

iAMkVIN-S commented 2 weeks ago

That's a great find Robert!

What should the value of RNV_ENGINE_PATH be? Have you tried setting it as an inline variable RNV_ENGINE_PATH=/path/to/your/engine npx rnv build -p tvos ?

Or do you think even when passing it like this, it's being lost by the commands that are executed following this one?

RobertArissen commented 2 weeks ago

Yes, it seems that during the step Bundle React Native code and images he doesn't have the correct environment; unfortunately, the above solution doesn't work.

The file index.bundle in Android TV is also empty ({}) when you run it with build; with run, it does contain a bundled file.

RobertArissen commented 2 weeks ago

@iAMkVIN-S Can you try updating rnv packages to 1.6.0-rc.0, including starting-templates (also in renative.json config file)

iAMkVIN-S commented 2 weeks ago

@RobertArissen Hello Robert, thank you for the quick reply.

Here are the steps that I did: (1) Deleted node_modules and package-lock.json (2) Updated all rnv related packages to 1.6.0-rc.0

(3) Updated the template-starter in renative.json

(4) Updated the rnv global cli

(5) Installed node_modules with npm i

(6) Built for tvOS with npx rnv build (select tvOS)

(7) Opened the RNVApp.xcworkspace and ran the RNVApp-tvOS on a simulator

I still get the following error in the simulator after a successful build:

No bundle URL present.

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

iAMkVIN-S commented 1 week ago

@RobertArissen // @Marius456 // @ElenaDiachenko // @pauliusguzas

Good monday morning to you beautiful people! 👋

Have you got any update on the tvOS build problem? Is there anything you would like me to try? I can get on a call with you if necessary to attempt some debugging together.

Thank you so much

flexn-io / renative