RNW 0.68 run-windows fails nuget restore when project depends on C# Native Modules

[maribeiroleya]

Problem Description

Hi,

I am trying to add a Native Module in C# to my project, but give the error: Project ReactNativeFileViewer is not compatible with native (native,Version=v0.0). Project ReactNativeFileViewer supports: uap10.0.16299 (UAP,Version=v10.0.16299)

Steps To Reproduce

1 . First create the native module with like in documentation: https://microsoft.github.io/react-native-windows/docs/native-modules-setup

• The last command i run is: npx react-native-windows-init --version latest --projectType lib --language cs --overwrite
• In native module versions are:
  • react --> 17.0.2
  • react-native --> 0.68.2
  • react-native-windows --> 0.68.4

2 - Create new Project like in documentation: https://microsoft.github.io/react-native-windows/docs/getting-started

• The versions in package.json is:
  • react --> 17.0.2
  • react-native --> 0.68.2
  • react-native-windows --> 0.68.4

3 - Add the native module to package.json of project 4 - npm i to install module 5 - Autolink the native module 6 - Run in VS x86

Expected Results

No response

CLI version

npx react-native --version

Environment

npx react-native info

Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

2019

Build Configuration

No response

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

No response

[jonthysell]

Can you provide more details? Are you trying to add a C# native module to a C++ app project? Docs on starting new native modules are here: https://microsoft.github.io/react-native-windows/docs/native-modules-setup

[AdaData]

@jonthysell just tested these steps for adding react-native-document-picker to a minimal rn-windows install and it reproduces the issue

npx react-native init rnDocumentPickerTest
cd rnDocumentPickerTest
npx react-native-windows-init
yarn windows

^ This will work, installs react-native 0.68.2 and react-native-windows 0.68.5

yarn add react-native-document-picker
npx react-native autolink-windows
yarn windows

This will result in this error

× Building Solution: Failed to restore C:\users\ada.{redacted}\git\rnDocumentPickerTest\node_modules\react-native-docu...
 × Build failed with message C:\users\ada.{redacted}\git\rnDocumentPickerTest\windows\rnDocumentPickerTest\rnDocumentPickerTest.vcxproj : error NU1201: Project ReactNativeDocumentPicker is not compatible with native (native,Version=v0.0). Project ReactNativeDocumentPicker supports: uap10.0.16299 (UAP,Version=v10.0.16299) [C:\users\ada.{redacted}\git\rnDocumentPickerTest\windows\rnDocumentPickerTest.sln]. Check your build configuration.

[AdaData]

Not sure if that's an issue with react-native-document-picker itself but we also are seeing similar errors in our own builds

[ghost]

This issue lacks the environment info requested in the bug template. Please edit your issue report to add this information.

If you are using latest version:

1. npx react-native --version:
2. npx react-native run-windows --info:

Otherwise if --info doesn't exist:

1. react-native -v:
2. npm ls rnpm-plugin-windows:
3. npm ls react-native-windows:
4. node -v:
5. npm -v:
6. yarn --version:

[maribeiroleya]

1 . First create the native module with like in documentation: https://microsoft.github.io/react-native-windows/docs/native-modules-setup

• The last command i run is: npx react-native-windows-init --version latest --projectType lib --language cs --overwrite
• In native module versions are:
  • react --> 17.0.2
  • react-native --> 0.68.2
  • react-native-windows --> 0.68.4

2 - Create new Project like in documentation: https://microsoft.github.io/react-native-windows/docs/getting-started

• The versions in package.json is:
  • react --> 17.0.2
  • react-native --> 0.68.2
  • react-native-windows --> 0.68.4

3 - Add the native module to package.json of project 4 - npm i to install module 5 - Autolink the native module 6 - Run in VS x86

[jonthysell]

@JunielKatarn It looks like there's a problem with C++ apps consuming C# modules during the nuget restore. You applied a fix for sample-apps, but that doesn't help everyone else.

For the c++ app vcxproj:

<PropertyGroup Label="NuGet">
  <ResolveNuGetPackages>false</ResolveNuGetPackages>
  <!-- https://github.com/NuGet/Home/issues/10511#issuecomment-778400668 -->
  <AssetTargetFallback>$(AssetTargetFallback);uap10.0.16299</AssetTargetFallback>
</PropertyGroup>

For the C# module csproj:

<PropertyGroup Label="NuGet">
  <AssetTargetFallback>$(AssetTargetFallback);native</AssetTargetFallback>
</PropertyGroup>

Can you look at moving that logic to the external property sheets so everyone gets it?

[andrelimawork]

Same problem here, followed microsoft guides to create the native module but it's failing when added to the app. Any workaround to fix this?

[jonthysell]

Same problem here, followed microsoft guides to create the native module but it's failing when added to the app. Any workaround to fix this?

@andrelimawork There are a couple bugs here that need to be resolved. As in my previous comment, there's some build properties that need to be set in both the C++ app and the C# native module to resolve this error. We did it locally in our sample-app projects, but not in a place that would be picked up by other projects.

As a workaround, you could manually add those changes yourself to your app and module project files, however the correct fix on our end would be to either

1. Update our project import files (if possible) to add this stuff (best case) OR
2. Update the project templates to include them (not as nice but better).

Furthermore, even if you apply the changes in @maribeiroleya 's case, the react-native-document-picker also has a bug that will cause a later part of the build to fail with:

Command failed with error MSBuildError: C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\MSBuild\Microsoft\VisualStudio\v16.0\AppxPackage\Microsoft.AppXPackage.Targets(1946,5): error APPX1112: Payload contains two or more files with the same destination path 'Microsoft.UI.Xaml.Markup.winmd'

The module was built on an older module project template and so uses a different (older) Windows SDK version than the app project. The module uses:

<TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.18362.0</TargetPlatformVersion>

Where-as a new app uses:

<TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.19041.0</TargetPlatformVersion>

To workaround this, you could try to add a file named Directory.Build.props in the root of your app (must be in a folder at or above node_modules) with the following:

<?xml version="1.0" encoding="utf-8"?>
<Project>
  <PropertyGroup>
    <TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
  </PropertyGroup>
</Project>

However a real fix would be for us to either update our imports to set that automatically on behalf of the modules (which might break other modules) or, even better, for the owners of react-native-document-picker to update to a newer template (specifically one that imports ExperimentalFeatures.props correctly) so that app devs could add the <TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion> line to their app's ExperimentalFeatures.props file.

[andrelimawork]

Sorry, but i've created a new module via npx: npx react-native-windows-init --version latest --projectType lib --language cs --overwrite and added the necessary code inside:

ReactNativeModule.cs

using Microsoft.ReactNative.Managed;
using Windows.ApplicationModel.Core;
using Windows.Storage;
using Windows.System;
using Windows.UI.Core;

namespace ReactNativeFileViewer
{
    [ReactModule("ReactNativeFileViewer")]
    internal sealed class ReactNativeModule
    {
        private ReactContext _reactContext;

        [ReactInitializer]
        public void Initialize(ReactContext reactContext)
        {
            _reactContext = reactContext;
        }

        [ReactMethod("open")]
        public async void Open(string filepath, IReactPromise<bool> promise)
        {
            try
            {
                var file = await StorageFile.GetFileFromPathAsync(filepath);

                if (file != null)
                {
                    await CoreApplication.MainView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =>
                    {
                        var success = await Launcher.LaunchFileAsync(file);

                        if (success)
                        {
                            promise.Resolve(true);
                        }
                        else
                        {
                            promise.Reject(new ReactError { Message = $"Error opening the file {filepath}" });
                        }
                    });
                }
                else
                {
                    promise.Reject(new ReactError { Message = $"Error loading the file {filepath}" });
                }
            }
            catch (Exception e)
            {
                promise.Reject(new ReactError { Exception = e });
            }
        }
    }
}

ReactPackageProvider.cs:

using Microsoft.ReactNative;
namespace ReactNativeFileViewer
{
    public partial class ReactPackageProvider : IReactPackageProvider
    {
        public void CreatePackage(IReactPackageBuilder packageBuilder)
        {
            CreatePackageImplementation(packageBuilder);
        }
        partial void CreatePackageImplementation(IReactPackageBuilder packageBuilder);
    }
}

I've followed the steps in the react native windows docs but i still get the error when the module it's added to the app project. The" newer template" it's not created by default when we create a new project with npx react-native-windows-init? How can we make this work? thanks

[MaxPMagee]

👍 Just another vote for figuring this out for 0.69.2 or 0.70.0, as we need to be able to upgrade in order to fix another issue that has been deferred to one of those. https://github.com/microsoft/react-native-windows/issues/9977

[ZacharyHenkel]

Creating a Directory.Build.props file in the root of an example app consuming ReactNativeFileViewer enabled the build to succeed.

File contents:

<?xml version="1.0" encoding="utf-8"?>
<Project>
  <PropertyGroup>
    <TargetPlatformVersion>10.0.19041.0</TargetPlatformVersion>
  </PropertyGroup>
  <PropertyGroup Label="NuGet">
    <AssetTargetFallback>$(AssetTargetFallback);uap10.0.16299</AssetTargetFallback>
  </PropertyGroup>
</Project>

[tero-paananen]

I managed to build c# module in c# app (react-native-windows 0.68) with following configs

App.csproj

    <TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.19041.0</TargetPlatformVersion>
    <TargetPlatformMinVersion>10.0.16299.0</TargetPlatformMinVersion>

<PropertyGroup Label="NuGet">
    <AssetTargetFallback>$(AssetTargetFallback);native</AssetTargetFallback>
  </PropertyGroup>

App's ExperimentalFeatures.props

<UseHermes>false</UseHermes>
<UseWinUI3>false</UseWinUI3>
<UseExperimentalNuget>false</UseExperimentalNuget>
<WindowsTargetPlatformVersion>10.0.19041.0</WindowsTargetPlatformVersion>

c# module csproj

 <Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
    <TargetPlatformVersion Condition=" '$(TargetPlatformVersion)' == '' ">10.0.18362.0</TargetPlatformVersion>
    <TargetPlatformMinVersion>10.0.16299.0</TargetPlatformMinVersion>

<PropertyGroup Label="NuGet">
    <AssetTargetFallback>$(AssetTargetFallback);native</AssetTargetFallback>
  </PropertyGroup>

I am not sure if all really needed...

[tero-paananen]

I still needed my hack above when build our C# RNW app package from Visual Studio 2022 into latest React Native Windows 0.73.x

Some tips from us:

// Project's .csproj

<PropertyGroup Label="NuGet">
   <AssetTargetFallback>$(AssetTargetFallback);native</AssetTargetFallback>
</PropertyGroup>

// ExperimantalFeatures.props

<UseWinUI3>false</UseWinUI3>
<UseHermes>true</UseHermes>
<WindowsTargetPlatformVersion>10.0.19041.0</WindowsTargetPlatformVersion>
<WindowsTargetPlatformMinVersion>10.0.17763.0</WindowsTargetPlatformMinVersion>
<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
<UseExperimentalNuget>false</UseExperimentalNuget>
<WinUI2xVersion>2.8.1</WinUI2xVersion>
<ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>

Note also these files at least on RNW 0.73

https://github.com/microsoft/react-native-windows/blob/f20a44e96fe0a92009c8d2779e343961ee5c97ea/vnext/PropertySheets/NuGet.CSharp.props

https://github.com/microsoft/react-native-windows/blob/f20a44e96fe0a92009c8d2779e343961ee5c97ea/vnext/PropertySheets/NuGet.Cpp.props

and usage of them is about

  <PropertyGroup Label="ReactNativeWindowsProps">
    <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
  </PropertyGroup>
  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\NuGet.CSharp.props" />

VS restore NuGet does not works currently for some reason. To get restore work i have to call nuget restore from PowerShell.

Nuget restore error from Visual Studio 2022 is Error occurred while restoring NuGet packages: File C:\xxxxxxxx\react-native-windows\Folly\packages.config does not exist.