The app generated by react-native-windows-init fails to build react-native-webview for ARM64

shirakaba commented 1 month ago

Problem Description

Using a project freshly initialised from react-native-windows-init with experimentalNuGetDependency enabled, I'm struggling to create an app that uses react-native-webview on ARM.

I get a build error upon running npx react-native run-windows --logging --arch arm64 --sln windows/react-native-app-auth-js.sln.

It seems to be specific to react-native-webview, as this short log appears in node_modules\react-native-webview\windows\ReactNativeWebView\ARM64\Debug\ReactNativeWebView.log:

Determining projects to restore... All projects are up-to-date for restore. Determining projects to restore... Discovered package 'react-native-windows' with version '0.73.17' C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\arm64\Microsoft.Common.CurrentVersion.targets(2401,5): error MSB3271: There was a mismatch between the processor architecture of the project being built "" and the processor architecture, "x86", of the implementation file "C:\Users\jamie\git\my_monorepo\node_modules\react-native-windows\target\Microsoft.ReactNative\Microsoft.ReactNative.dll" for "C:\Users\jamie\git\my_monorepo\node_modules\react-native-windows\target\Microsoft.ReactNative\Microsoft.ReactNative.winmd". This mismatch may cause runtime failures. Please consider changing the targeted processor architecture of your project through the Configuration Manager so as to align the processor architectures between your project and implementation file, or choose a winmd file with an implementation file that has a processor architecture which matches the targeted processor architecture of your project.

The full error log propagated up to the CLI is this:

✖ Building Solution ✖ Build failed with message C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\Microsoft.Common.CurrentVersion.targets(2401,5): error MSB3271: There was a mismatch between the processor architecture of the project being built "" and the processor architecture, "x86", of the implementation file "C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-windows\target\Microsoft.ReactNative\Microsoft.ReactNative.dll" for "C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-windows\target\Microsoft.ReactNative\Microsoft.ReactNative.winmd". This mismatch may cause runtime failures. Please consider changing the targeted processor architecture of your project through the Configuration Manager so as to align the processor architectures between your project and implementation file, or choose a winmd file with an implementation file that has a processor architecture which matches the targeted processor architecture of your project. [C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj]. Check your build configuration. ✖ It is possible your installation is missing required software dependencies. Dependencies can be automatically installed by running C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-windows\scripts\rnw-dependencies.ps1 from an elevated PowerShell prompt.
For more information, go to http://aka.ms/rnw-deps ℹ Gathering MSBuild data for telemetry. ℹ Loading properties from msbuildproperties.g.json Command failed with error MSBuildError: C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Current\Bin\Microsoft.Common.CurrentVersion.targets(2401,5): error MSB3271: There was a mismatch between the processor architecture of the project being built "" and the processor architecture, "x86", of the implementation file "C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-windows\target\Microsoft.ReactNative\Microsoft.ReactNative.dll" for "C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-windows\target\Microsoft.ReactNative\Microsoft.ReactNative.winmd". This mismatch may cause runtime failures. Please consider changing the targeted processor architecture of your project through the Configuration Manager so as to align the processor architectures between your project and implementation file, or choose a winmd file with an implementation file that has a processor architecture which matches the targeted processor architecture of your project. [C:\Users\jamie\git\my_monorepo\packages\rd implementation file, or choose a winmd file with an implementation file that has a processor architecture which matches the targeted processor architecture of your project. [C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj] Your telemetry sessionId was 179d676ddb99d00f996ab52fad6fb998 ELIFECYCLE Command failed with exit code 2302.

I'm specifying in the CLI that I want it to build for ARM, so I'm unclear why it's failing. Does react-native-webview lack an ARM slice or something? Or is experimentalNuGetDependency only built for x86?

Steps To Reproduce

Initialise a react-native-windows app inside an existing react-native@0.73 project:

npx --yes react-native-windows-init --overwrite --projectType=app --useHermes --experimentalNuGetDependency --language=cpp --namespace=jp.example.ReactNativeAppAuthJs.demo

Build it for ARM:

npx react-native run-windows --logging --arch arm64 --sln windows/react-native-app-auth-js.sln

Expected Results

I should be able to build my RNW app on ARM without react-native-webview causing a build failure.

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

  WARNING: You should run npx react-native@latest to ensure you're always using the most current version of the CLI. NPX has cached version (0.73.9) != current release (0.74.5)

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (4) x64 Apple Silicon
  Memory: 1.47 GB / 7.99 GB
Binaries:
  Node:
    version: 20.15.0
    path: ~\AppData\Local\Volta\tools\image\node\20.15.0\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Local\Volta\tools\image\yarn\1.22.22\bin\yarn.CMD
  npm:
    version: 10.7.0
    path: ~\AppData\Local\Volta\tools\image\node\20.15.0\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.10.35027.167 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.9
    wanted: ~0.73.9
  react-native-windows:
    installed: 0.73.19
    wanted: ~0.73.17
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

Time Elapsed 00:00:01.67
✔ Restoring NuGet packages
 ✔ Auto-linking...
Success: No auto-linking changes necessary. (224ms)
 ✔ Found Solution: C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\windows\react-native-app-auth-js.sln
 ℹ Build configuration: Debug
 ℹ Build platform: x64
 ✖ Building Solution: C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VisualStudio\v17....
 ✖ Build failed with message C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VisualStudio\v17.0\AppxPackage\Microsoft.AppXPackage.Targets(2006,5): error APPX1111: Payload contains two or more files with the same destination path 'hermes.dll', but they are different sizes. Source files:  [C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\windows\react-native-app-auth-js\react-native-app-auth-js.vcxproj]. Check your build configuration.
 ✖ It is possible your installation is missing required software dependencies. Dependencies can be automatically installed by running C:\Users\jamie\git\my_monorepo\packages\react-native-app-auth-js\node_modules\react-native-windows\scripts\rnw-dependencies.ps1 from an elevated PowerShell prompt.
For more information, go to http://aka.ms/rnw-deps
Command failed. Re-run the command with --logging for more information.
ELIFECYCLE Command failed with exit code 2302.

There are a few mentions of "Payload contains two or more files with the same destination path" in the issues.

I've checked all offered solutions:

I've confirmed with pnpm why react-native-windows that I only have one copy of react-native-windows
The <ReactNativeWindowsDir is already in the suggested state for an example app to go along with a native module package.
I've tried pinning to <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>.

All have the same result.

jonthysell commented 4 weeks ago

There are a few mentions of "Payload contains two or more files with the same destination path" in the issues.

It looks like it's complaining about hermes.dll, which is currently provided by the Microsoft.JavaScript.Hermes package, the version of which should have been chosen by RNW in by the property in react-native-windows\PropertySheets\JSEngine.props and loaded by the PackageReferences in react-native-windows\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets for your app and react-native-windows\PropertySheets\External\Microsoft.ReactNative.Uwp.CppLib.targets for native modules.

It's possible that one or more of your modules are specifying a different version of Hermes (maybe even a different older package since we renamed it at some point) which is why you're getting two different hermes.dll files. The modules would need to be updated to not specify a reference for a version of Hermes themselves and instead rely on the version being coordinated by those RNW property sheets.

shirakaba commented 4 weeks ago

That'd make sense. I'm using react-native-svg, react-native-webview, and a library of my own making.

However, I've since re-initialised the library of my own making with a different boilerplate and it's now building with experimentalNuGetDependency disabled.

I would like to re-enable experimentalNuGetDependency, however. Do you have any thoughts about the original error I got whilst experimentalNuGetDependency was enabled, about error MSB3271?

microsoft / react-native-windows