Not yet able to include non-UI component projects (async-storage, clipboard) in a Fabric project

chrisglein commented 8 months ago

Problem Description

I decided to try to push the Fabric chat app to the next level of legitimacy, by enabling some non-UI modules. async-storage, specifically: async-storage/packages/default-storage/windows. So I restored the dependency in my package.json: "@react-native-async-storage/async-storage": "^1.17.11",

And it fails to build because...

Error   MDM2009 Duplicate type Microsoft.UI.Xaml.Automation.Peers.AnimatedVisualPlayerAutomationPeer found processing metadata file C:\Users\cglein\.nuget\packages\microsoft.ui.xaml\2.8.0\lib\uap10.0\Microsoft.UI.Xaml.winmd, type already exists in file C:\Users\cglein\.nuget\packages\microsoft.windowsappsdk\1.4.240211001\lib\uap10.0\Microsoft.UI.Xaml.winmd. ReactNativeAsyncStorage D:\GitHub\artificial-chat\node_modules\@react-native-async-storage\async-storage\windows\ReactNativeAsyncStorage\MDMERGE    1

Duplicate types.

Looking at the updated package.lock.json... it's pulling in Microsoft.UI.Xaml 2.8.0 (and WebView2). Which... async storage shouldn't need. It's just a code module, no UI. See this commit

I'd guess this something with the RNW props pulled in its vcxproj that it'll need different for Paper UWP vs. Fabric Win32?

Steps To Reproduce

Create a Fabric app link
Add a dependency on async storage to the package.json: "@react-native-async-storage/async-storage": "^1.17.11",
Build

Expected Results

Builds

CLI version

13.0.0

Environment

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.23660
  CPU: "(24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores     "
  Memory: 48.92 GB / 63.86 GB
Binaries:
  Node:
    version: 18.16.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.5.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.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.9.34616.47 (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.74.0-nightly-20240115-0c7008f28
    wanted: 0.74.0-nightly-20240115-0c7008f28
  react-native-windows:
    installed: 0.0.0-canary.776
    wanted: ^0.0.0-canary.776
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

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

https://github.com/chrisglein/artificial-chat/tree/fabric_addModules

https://github.com/chrisglein/artificial-chat/commit/7c4e02df82e379e879745bf3ef8580991a0cdcdf

acoates-ms commented 8 months ago

At this point I'd expect a non-UI community module to always produce a TurboModule, and be completely compatible with Fabric and Paper. -- Maybe the problem is that the template / props files have no way of being configured in a way that doesn't also add dependencies to WinUI - which might be useful for modules that want to provide calls into WinUI - but is overkill for ones that have no-UI at all.

We also need to work out how to correctly configure community modules to depend on the correct WinUI for paper vs fabric.

Yajur-Grover commented 8 months ago

Tried enabling react-native-device-info and doing the same in a Fabric app and ran into the same error:

Error MDM2009 Duplicate type Microsoft.UI.Xaml.Automation.Peers.AnimatedVisualPlayerAutomationPeer found processing metadata file C:\Users\yajurgrover.nuget\packages\microsoft.ui.xaml\2.8.0\lib\uap10.0\Microsoft.UI.Xaml.winmd, type already exists in file C:\Users\yajurgrover.nuget\packages\microsoft.windowsappsdk\1.4.240211001\lib\uap10.0\Microsoft.UI.Xaml.winmd. RNDeviceInfoCPP C:\Users\yajurgrover\new-account-repos\MyApp\node_modules\react-native-device-info\windows\RNDeviceInfoCPP\MDMERGE 1

chrisglein commented 1 month ago

@Yajur-Grover is this unblocked now with dependent changes merged? Is it safe to try async-storage again?

Yajur-Grover commented 1 month ago

This change will be unblocked once https://github.com/react-native-async-storage/async-storage/pull/1147 is merged in. Once it's merged, we can try async-storage again, and then apply the same steps to clipboard.

microsoft / react-native-windows