error NU1201: Project ReactNativeDocumentPicker is not compatible with native (native,Version=v0.0). Project ReactNativeDocumentPicker supports: uap10.0.16299 (UAP,Version=v10.0.16 299)
Opened this issue · 11 comments
Bug report
Summary
After starting a new project with react-native-windows and installing this package "react-native-document-picker", it gives me the title of this issue error.
For now is there any workarround?
Reproducible sample code
Using only template code...
Steps to reproduce
Newly created project with command lines:
npx react-native init lenaStoreGep3 --template react-native@^0.68.0
cd .\lenaStoreGep3\
npx react-native-windows-init --overwrite
npx react-native autolink-windows
npm install --save react-native-document-picker
npx react-native autolink-windows
npx react-native run-windows
And it comes back with this error:
\node_modules\react-native-document-picker\windows\ReactNativeDocumentPicker\ReactNativeDocumentPicker.csproj : error NU1201: Project Microsoft.ReactNative is not compatible with uap10.0.16299 (UAP,Version=v10.0.16299). Project Microsoft.ReactNative supports: native (native,Version=v0.0)
Environment info
package.json
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"windows": "react-native run-windows"
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-document-picker": "^8.1.0",
"react-native-windows": "0.68.3"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-test-renderer": "17.0.2",
"metro-config": "^0.67.0"
},
"jest": {
"preset": "react-native"
}
npx react-native info
output:
System:
OS: Windows 10 10.0.19044
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 22.78 GB / 31.95 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 29, 30, 31, 32
Build Tools: 28.0.3, 32.0.0, 32.1.0
System Images: android-29 | Android TV Intel x86 Atom, android-29 | ARM 64 v8a, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Android TV Intel x86 Atom, android-30 | China version of Wear OS 3 - Preview Intel x86 Atom, android-30 | Wear OS 3 - Preview ARM 64 v8a, android-30 | Wear OS 3 - Preview Intel x86 Atom, android-30 | ARM 64 v8a, android-30 | Intel x86 Atom_64, android-30 | Google TV Intel x86 Atom, android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64, android-31 | Android TV Intel x86 Atom, android-31 | ARM 64 v8a, android-31 | Intel x86 Atom_64, android-31 | Google TV Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
Android NDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.10240.0, 10.0.10586.0, 10.0.14393.0, 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
IDEs:
Android Studio: Version 2021.1.0.0 AI-211.7628.21.2111.8193401
Visual Studio: 16.11.32428.217 (Visual Studio Community 2019)
Languages:
Java: 1.8.0_302 - C:\Program Files\Eclipse Foundation\jdk-8.0.302.8-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-windows: 0.68.3 => 0.68.3
npmGlobalPackages:
*react-native*: Not Found
library version: ^8.1.0
react-native-windows: 0.68.3
hello, thanks for reporting. Unfortunately, I do not run windows, so the support for it is not really guaranteed.
If you could fix this and contribute the fix in a PR, that would be wonderful.
Thank you!
+1
+1
hello, thanks for reporting. Unfortunately, I do not run windows, so the support for it is not really guaranteed.
If you could fix this and contribute the fix in a PR, that would be wonderful.
Thank you!
I do not have that high level knowledge to know how to fix this problem :\
@qmatteoq and @sanjeevjadhav15 is this something you might have some insight into? I think there's a min react-native-windows version somewhere that is causing issues here? Sorry I can't be more helpful, but we're also not sure how to address this issue.
Looks like they have a suggestion over on react native for windows: microsoft/react-native-windows#10059 (comment)
@jonthysell, I tried the work-around with the Directory.Build.props and didn't have any success. Could you suggest/drop a pull request in this project with the experimental.props change you suggested (I don't really understand what that means, and it sounds like there isn't a lot of Windows support on this project)? Any help you can lend would be awesome, as this is blocking us from upgrading to react-native/react-native-windows 0.69.1.
Still getting the following output
error NU1201: Project Microsoft.ReactNative is not compatible with uap10.0.16299 (UAP,Version=v10.0.16299). Project Microsoft.ReactNative supports: native (native,Version=v0.0)
Even after creating a Directory.Build.props ref'ing 10.0.19041.0
in the project directory, one level above node_modules
(also tried adding it inside the node_modules
, but nothing changed).
None of the obvious changes worked, so we went "back to the drawing board".
Turns out the official RNW docs has a very vague sketch of a native module with the Windows Picker: https://microsoft.github.io/react-native-windows/docs/native-modules-async#executing-calls-to-api-on-the-ui-thread
We wanted to show an open file picker and bring the contents back to JS. https://docs.sheetjs.com/docs/demos/desktop/#react-native-windows is a complete demo from scratch, but the highlight is:
REACT_MODULE(DocumentPicker);
struct DocumentPicker
{
/* The context must be stored when the module is initialized */
REACT_INIT(Initialize);
void Initialize(const ReactContext& reactContext) noexcept {
context = reactContext;
}
REACT_METHOD(PickAndRead);
void PickAndRead(ReactPromise<winrt::hstring> promise) noexcept {
auto prom = promise;
/* perform file picker action in the UI thread */
context.UIDispatcher().Post([prom = std::move(prom)]()->winrt::fire_and_forget {
auto p = prom; // promise -> prom -> p dance avoids promise destruction
/* create file picker */
winrt::Windows::Storage::Pickers::FileOpenPicker picker;
picker.SuggestedStartLocation(PickerLocationId::DocumentsLibrary);
picker.FileTypeFilter().Append(L".xlsx");
picker.FileTypeFilter().Append(L".xls");
/* show file picker */
StorageFile file = co_await picker.PickSingleFileAsync();
if(file == nullptr) { p.Reject("File not Found"); co_return; }
/* read data and return base64 string */
auto buf = co_await FileIO::ReadBufferAsync(file);
p.Resolve(CryptographicBuffer::EncodeToBase64String(buf));
co_return;
});
}
private:
ReactContext context{nullptr};
};
The JS integration is straightforward when added to an app directly (and there is presumably a similar integration for modules):
// at the top of App.js
import { getEnforcing } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
const DocumentPicker = getEnforcing('DocumentPicker');
// ... whenever the picker should be called
const b64 = await DocumentPicker.PickAndRead();
@vonovak with some work, the entire library interface can be implemented in this manner. Would you entertain a complete replacement of the existing C# module with a C++ one? The compatibility matrix suggests that a C++ module would have broader compatibility than a C# module.
I was able to workaround this by going into node_modules/react-native-document-picker/windows and opening up ReactNativeDocumentPicker.sln in Visual Studio. On the right pane, I right clicked the project file ReactNativeDocumentPicker and went to Properties. There I changed the Target version to 19041 and the Min Version to 17763. Then in Visual studio, I clicked Build -> Clean Solution and then Build -> Rebuild Solution. The build gets errors about ReactNativeManaged.dll, but for some reason I am able to build my react native windows project with no issues.
I also tested this on document picker version 6.0.4 and it worked and the build was successful in Visual Studio as well.
Looks like there are 2 issues tracking this. I left a comment in the other one with links to how this has been addressed in other modules: #676 (comment)
I was able to workaround this by going into node_modules/react-native-document-picker/windows and opening up ReactNativeDocumentPicker.sln in Visual Studio. On the right pane, I right clicked the project file ReactNativeDocumentPicker and went to Properties. There I changed the Target version to 19041 and the Min Version to 17763. Then in Visual studio, I clicked Build -> Clean Solution and then Build -> Rebuild Solution. The build gets errors about ReactNativeManaged.dll, but for some reason I am able to build my react native windows project with no issues.
I also tested this on document picker version 6.0.4 and it worked and the build was successful in Visual Studio as well.
Just ran into the issue today and this was the workaround that worked instantly for me. Thanks!