ReactApp package manifest referencing incorrect image assets when building

[Yajur-Grover]

What happened?

I am trying to upgrade the async-storage windows module to run on the new architecture, and am facing some issues when trying to launch the example app. I ran yarn install-windows-test-app --use-fabric to update the example app in the async-storage repo, as well as the cpp-lib template to update the default-storage package. When running yarn react-native run-windows to launch the sample app, I am getting the following error:

× Building Solution
× Build failed with message 3:6>Package.appxmanifest(47,9): error APPX0703: Manifest references file 'Images\Square150x150Logo.png' which is not part of the payload. [C:\new-account-repos\async-storage\packages\default-storage\node_modules.generated\windows\Win32\ReactApp.Package.wapproj]. Check your build configuration.
i Gathering MSBuild data for telemetry.
i Loading properties from msbuildproperties.g.json
Command failed with error MSBuildError: 3:6>Package.appxmanifest(47,9): error APPX0703: Manifest references file 'Images\Square150x150Logo.png' which is not part of the payload. [C:\new-account-repos\async-storage\packages\default-storage\node_modules.generated\windows\Win32\ReactApp.Package.wapproj]

I think it's the images have their scale built into their names, like this:

However, the VisualElements tag doesn't include the name in the tag - just is the following:

<uap:VisualElements
        DisplayName="ReactApp"
        Description="React Native app"
        BackgroundColor="transparent"
        Square150x150Logo="Images\Square150x150Logo.png"
        Square44x44Logo="Images\Square44x44Logo.png"
      >

Not sure what the issue is - from what I've seen in this PR, the code in my .generated directory is the same as the structure there.

Version

3.8.10

What platforms are you seeing this issue on?

• Android
• iOS
• macOS
• visionOS
• Windows

System Information

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.26120
  CPU: "(24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores     "
  Memory: 50.16 GB / 63.86 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 4.2.2
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-213.7172.25.2113.9123335
  Visual Studio:
    - 17.10.35027.167 (Visual Studio Enterprise 2022)
    - 16.11.34931.43 (Visual Studio Enterprise 2019)
Languages:
  Java: 18.0.2.1
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.5
    wanted: ^0.74.0
  react-native-windows:
    installed: 0.74.15
    wanted: ^0.74.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to Reproduce

Branch which contains issue: https://github.com/Yajur-Grover/async-storage/tree/yg-fabric-windows-upgrade

On the branch, the following steps will reproduce the issue:

1. Run yarn in root
2. Run yarn in packages/default-storage
3. Run yarn install-windows-test-app -p sample/windows --use-fabric in packages/default-storage
4. Run yarn react-native run-windows --root sample --logging in packages/default-storage

Code of Conduct

• I agree to follow this project's Code of Conduct

[tido64]

I had a quick look at your branch and I have a few questions:

• I'm not sure why there is a package-lock.json here. Did you run npm i instead of yarn install?
• Why did you need to create a new sample folder?
• It looks like you attempted to bump to 0.74, but there are old packages around because of overrides in the root package.json. This causes issues because now you have duplicates of everything.

That said, I am not quite sure why the image asset cannot be found. The templates RNTA uses are the ones found here: https://github.com/microsoft/react-native-windows/tree/main/vnext/templates/cpp-app

And as far as I can see, the .wapproject and the images match. Additionally, RNTA also has images for scales 100% and 400%.

I've noticed that during build, an AppxManifest.xml is generated under node_modules/.generated/windows/Win32/bin/x64/Debug/. This one also contains references to Images/*, but the directory is missing them entirely. This is probably the actual cause of your build issues. I have no why the images weren't copied over.

@acoates-ms: Is this something you've encountered before?

[tido64]

On closer inspection, there are differences in the .wapproj. Hopefully, the PR above will help with missing assets.