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

[iAMkVIN-S]

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]

@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]

@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]

@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]

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

[iAMkVIN-S]

@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]

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]

@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?