Cannot get auto-linking to work

[bzoz]

Cannot get autlonking to work. Tried both react-native-webview and react-native-config while porting it to Windows.

Environment

Run the following in your terminal and copy the results here.

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

  System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 21.51 GB / 31.85 GB
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
    react-native-windows: ^0.63.0-0 => 0.63.2
  Installed UWP SDKs:
    10.0.17763.0
    10.0.18362.0

3. reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock":

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock
    AllowDevelopmentWithoutDevLicense    REG_DWORD    0x1
    AllowAllTrustedApps    REG_DWORD    0x1

Steps To Reproduce

E.g. with the react-native-webview. Did the following to make a sample app:

npx react-native init RNWV --template react-native@^0.63.2
cd RNW
npx react-native-windows-init --overwrite
yarn add react-native-webview

Modified App.js with the sample self-contained code:

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyInlineWeb extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

After running npx react-native run-windows it looks like the module is not autolinked. I get this error:

Breaking the code inside node-modules\react-native-webview also does not break the build process.

Running npx react-native autolink-windows --logging produces:

- Auto-linking...
Parsing project...
Found Windows app project, config:
{
  folder: 'C:\\Users\\ja\\RNWV',
  sourceDir: 'windows',
  solutionFile: 'RNWV.sln',
  project: {
    projectFile: 'RNWV/RNWV.vcxproj',
    projectName: 'RNWV',
    projectLang: 'cpp',
    projectGuid: '{09961e61-f4f7-47b0-a80d-c1be08ababfd}'
  }
}
Parsing dependencies...
react-native-webview has Windows implementation, config:
{
  folder: 'C:\\Users\\ja\\RNWV\\node_modules\\react-native-webview',
  projects: [],
  solutionFile: 'ReactNativeWebView.sln',
  nugetPackages: [],
  sourceDir: 'windows'
}
Adding react-native-webview.
Calculating AutolinkedNativeModules.g.cpp...
Reading AutolinkedNativeModules.g.cpp...
No changes to AutolinkedNativeModules.g.cpp.
Calculating AutolinkedNativeModules.g.targets...
Reading AutolinkedNativeModules.g.targets...
No changes to AutolinkedNativeModules.g.targets.
Calculating RNWV.sln changes...
 √ Auto-linking...
Success: No auto-linking changes necessary. (1498ms)

Similarly, when autolinking my react-native-config I see it being detected with empty projects and nugetPackages values, and similarly, it does not get included in the build.

Expected Results

It just works

[asklar]

CC @jonthysell

[jonthysell]

Both react-native-webview and react-native-config only target react-native-windows 0.61.

Autolinking was added in RNW 0.63 and will only work on properly set-up native modules which target at least RNW 0.62. There were tooling and template upgrades in 0.62 to make this possible.

I am currently in the process of updating the native module setup documentation to reflect the work necessary for a module to be detected by autolinking.

In the meantime, see react-native-camera for an example of a windows implementation that supports 0.61, 0.62, and 0.63, with autolinking.

[bzoz]

@jonthysell thanks, that cleared some things for me. I've assumed that the React version used in the app must be 0.63 for the auto-linking to work. I'll take a look at react-native-camera implementation.

[jonthysell]

@jonthysell thanks, that cleared some things for me. I've assumed that the React version used in the app must be 0.63 for the auto-linking to work. I'll take a look at react-native-camera implementation.

Yes, the app must use RNW 0.63 in order for autolinking to run, and the native module's build files (vcxproj) must include certain target files to be detected, which only exist in RNW 0.62+.

However, this is all just a limitation of the build files - it is completely possible for a native module to have one set of source files and support 0.61+. You just need to have (at least) one project for 0.61, and one project for 0.62+. That's what react-native-camera does. And an app developer targeting 0.61 will need to manually choose the first project, an app developer targeting 0.62 will have to manually choose the second project, and an app developer targeting 0.63 can just use autolinking.

For further reference, here's the installation steps for react-native-camera: https://react-native-community.github.io/react-native-camera/docs/installation#windows

Unfortunately so much has changed internally in RNW from 0.61 - 0.63, that we can't really backport autolinking. So this is the compromise.

[bzoz]

@jonthysell I have one more final question: if I want a module to support all RNW versions since 0.61, do I need 3 separate .sln files like the ones in react-native-camera?

[jonthysell]

The solution files are only necessary for development and testing of the module itself. Apps developers won't consume them.

If you want to test that your module can build successfully against 61, 62, and 63 directly within your repo, then yes you need multiple solution files. And you'll have to make sure you yarn install the correct versions of RN/RNW to build against.

However, I don't know what your current build validation looks like - if you're only testing by building against 63 for android/ios, then maybe the extra solution files will just be confusing.

[bzoz]

I just want to make sure the modules I'm porting will support 0.61+ and autolinking. So, if I understand correctly I only need two vcxproj files - one for 0.61 and one for 0.62+. I also don't need any solution files in the module itself to make this work?

[jonthysell]

Closing as resolved as the linked PR was merged.