Cannot run React Native Windows App

[ngducnghia]

Environment

$ npx react-native info
info Fetching system and libraries information...
System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Memory: 947.75 MB / 7.93 GB
Binaries:
Node: 12.16.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

Then, specify:

• Target Platform Version(s): 10.0.18362.0

• Target Device(s): Desktop

• Visual Studio Version: Visual Studio 2019

• Build Configuration: Debug

Steps to Reproduce

(Write your steps here:)

1.npx react-native init ReactWindows --version ^0.61.5
2.cd ReactWindows
3.npx react-native-windows-init --overwrite
4. npx react-native run-windows

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

1. Try to run Without Using Visual Studio
   Running MSBuild with args /clp:NoSummary;NoItemAndPropertyList;Verbosity=normal /nologo /p:Configuration=Debug /p:Platform=x86 /p:AppxBundle=Never /p:PlatformToolset=v141 /p:VisualStudioVersion=16.0 /bl
   × Building Solution: Utilization: 100.0 Average Utilization: 100.0...
   × Build failed with message undefined. Check your build configuration.
   

2. Try to run With Visual Studio 2019
   

3. Try to run with Visual Studio Code
   Could not debug. Error while executing command 'c:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules.bin\react-native.cmd run-windows --proxy --no-packager': Error while executing command 'c:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules.bin\react-native.cmd run-windows --proxy --no-packager' (error code 101)
   

(Write what happened. Add screenshots!)

react-native run-windows --logging

  If you see build failure on `react-native run-windows`, please try again with 'react-native run-windows --logging' and provide the [output.]
C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native-windows\PropertySheets\ReactPatches.targets(35,5):
 error MSB3027: Could not copy "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native\ReactCommon\fabric
\components\view\accessibility\accessibilityPropsConversions.h" to "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_mod 
ules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\fabric\components\vie 
w\accessibility\accessibilityPropsConversions.h". Exceeded retry count of 10. Failed.  [C:\Users\nghia\source\repos\React-Windows-HelloWorld\R 
eactWindows\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native-windows\PropertySheets\ReactPatches.targets(35,5): 
 error MSB3021: Unable to copy file "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native\ReactCommon\f 
abric\components\view\accessibility\accessibilityPropsConversions.h" to "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\nod 
e_modules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\fabric\component 
s\view\accessibility\accessibilityPropsConversions.h". Could not find a part of the path 'C:\Users\nghia\source\repos\React-Windows-HelloWorld 
\ReactWindows\node_modules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\ 
\fabric\components\view\accessibility\accessibilityPropsConversions.h'. [C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\nod 
e_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
  Copying file from "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native\ReactCommon\fabric\textlayout
  manager\platform\ios\RCTTextPrimitivesConversions.h" to "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\reac
  t-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\fabric\textlayoutmanager\pla 
  tform\ios\RCTTextPrimitivesConversions.h".
C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native-windows\PropertySheets\ReactPatches.targets(35,5):
 error MSB3027: Could not copy "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native\ReactCommon\fabric
\textlayoutmanager\platform\ios\RCTTextPrimitivesConversions.h" to "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_mod 
ules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\fabric\textlayoutmana 
ger\platform\ios\RCTTextPrimitivesConversions.h". Exceeded retry count of 10. Failed.  [C:\Users\nghia\source\repos\React-Windows-HelloWorld\R
eactWindows\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native-windows\PropertySheets\ReactPatches.targets(35,5): 
 error MSB3021: Unable to copy file "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native\ReactCommon\f 
abric\textlayoutmanager\platform\ios\RCTTextPrimitivesConversions.h" to "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\nod 
e_modules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\fabric\textlayou 
tmanager\platform\ios\RCTTextPrimitivesConversions.h". Could not find a part of the path 'C:\Users\nghia\source\repos\React-Windows-HelloWorld 
\ReactWindows\node_modules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\ 
\fabric\textlayoutmanager\platform\ios\RCTTextPrimitivesConversions.h'. [C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\nod 
e_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
Done Building Project "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-native-windows\Microsoft.ReactNati 
ve\Microsoft.ReactNative.vcxproj" (default targets) -- FAILED.

Done Building Project "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\windows\ReactWindows\ReactWindows.vcxproj.metaproj" ( 
default targets) -- FAILED.

Done Building Project "C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\windows\ReactWindows.sln" (default targets) -- FAILED
.

Deferred Messages

Detailed Build Summary

============================== Build Hierarchy (IDs represent configurations) =====================================================
Id : Exclusive Time Total Time Path (Targets)

0 : 0.140s 32.873s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\windows\ReactWindows.
sln ()
| 1 : 0.011s 32.721s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\windows\ReactWindows\
ReactWindows.vcxproj.metaproj ()
| . 4 : 25.936s 32.710s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-n
ative-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj ()
| | | 5 : 1.287s 1.287s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\Common\Common.vcxproj ()
| | | 6 : 1.780s 1.780s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\Folly\Folly.vcxproj ()
| | | 7 : 1.283s 1.337s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\JSI\Universal\JSI.Universal.vcxproj ()
| | | | 10 : 0.022s 0.022s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\Common\Common.vcxproj (GetNativeManifest)
| | | . 11 : 0.032s 0.032s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\Common\Common.vcxproj (GetResolvedLinkLibs)
| | | 8 : 1.011s 1.050s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\ReactCommon\ReactCommon.vcxproj ()
| | | . 12 : 0.039s 0.039s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\Folly\Folly.vcxproj (GetNativeManifest)
| | | 9 : 1.069s 1.217s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\ReactWindowsCore\ReactWindowsCore.vcxproj ()
| | | | 13 : 0.061s 0.061s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\ReactCommon\ReactCommon.vcxproj (GetNativeManifest)
| | | | 14 : 0.038s 0.038s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\Folly\Folly.vcxproj (GetResolvedLinkLibs)
| | | . 15 : 0.048s 0.048s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\ReactCommon\ReactCommon.vcxproj (GetResolvedLinkLibs)
| | | 16 : 0.034s 0.034s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\JSI\Universal\JSI.Universal.vcxproj (GetNativeManifest)
| | . 17 : 0.067s 0.067s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\node_modules\react-nat
ive-windows\ReactWindowsCore\ReactWindowsCore.vcxproj (GetNativeManifest)
| 2 : 0.007s 0.007s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\windows..\node_module
s\react-native-windows\ReactCommon\ReactCommon.vcxproj.metaproj ()
. 3 : 0.006s 0.006s C:\Users\nghia\source\repos\React-Windows-HelloWorld\ReactWindows\windows..\node_module
s\react-native-windows\ReactWindowsCore\ReactWindowsCore.vcxproj.metaproj ()

============================== Node Utilization (IDs represent configurations) ====================================================
Timestamp: 1 Duration Cumulative

637229702341547238: 0 0.102s 0.102s ..
637229702342564518: 1 0.009s 0.111s
637229702342654290: 4 0.414s 0.525s ........
637229702346793353: 5 1.287s 1.811s .........................
637229702359658793: 6 1.781s 3.592s ...................................
637229702377471142: 7 0.120s 3.712s ..
637229702378667945: 10 0.022s 3.734s
637229702378887358: 7 0.849s 4.583s ................
637229702387374655: 11 0.032s 4.615s
637229702387693794: 7 0.315s 4.930s ......
637229702390845408: 8 0.159s 5.088s ...
637229702392431123: 12 0.039s 5.127s
637229702392820076: 8 0.853s 5.980s .................
637229702401347279: 9 0.125s 6.105s ..
637229702402593933: 13 0.061s 6.166s .
637229702403202336: 9 0.501s 6.666s ..........
637229702408208927: 14 0.038s 6.704s
637229702408587902: 15 0.048s 6.752s
637229702409066628: 9 0.445s 7.197s ........
637229702413514729: 4 0.008s 7.205s
637229702413594563: 16 0.034s 7.239s
637229702413933617: 17 0.067s 7.305s .
637229702414601834: 4 25.515s 32.820s +++++ (scale 1:100)
637229702669750161: 1 0.003s 32.823s
637229702669780269: 2 0.007s 32.830s
637229702669849906: 3 0.006s 32.836s
637229702669909705: 0 0.037s 32.873s

Utilization: 100.0 Average Utilization: 100.0
× Building Solution
× Build failed with message undefined. Check your build configuration.

Additional context

(Write any other additional context that may help in root causing the issue.)

[chrisglein]

Thank you for the detailed diagnostics.
One thing that definitely looks fishy is that in your "Try to run With Visual Studio 2019" steps it's listing a failure with an iOS path.
Also where you received "Build failed with message undefined" we do have a fix in our master branch that fixes that error. Let me get back to you with instructions for how you might try that out.

@NickGerleman there's some mention of the patching targets here, can you look and see if there's something that jumps out to you?

[NickGerleman]

The target failing is the standard MSBuild file copy target. React patching happens before the rest of the build, so it's possibly acting as a bit of a canary. I.e. it feels like the issue is that we're not able to write to the build directory.

One possible reason for failing to copy a file could be permissions issues. E.g. if we somehow installed the package while elevated, then tried to run the build as something non-admin, I think we could potentially see issues writing to the directory. Given we've historically required running JS tools elevated, that could be the issue. I've seen this transiently caused by antivirus locking files before as well. @ngducnghia would you mind testing the Visual Studio workflow, but running Visual Studio as an admin? I'm wondering if the CLI is seeing a different error.

@asklar do you know the build your changes for better CLI error reporting went into? Was that for the internal CLI or something external? If it's for the internal CLI in vnext, we might want to consider back-porting.

We really shouldn't be writing into node_modules as a build directory in the first place, and we've seen other issues from this. This should hopefully be fixed by the DLL distribution work @acoates-ms has been doing, since we can just package a DLL, but it seemed like we might not get that until 0.63.

[ngducnghia]

@NicholasCouri @chrisglein I think I found the root cause, Microsoft.ReactNative.SharedManaged project was unable to build because the path reach over 260 character limit. I move the project to outer folder to shorten the path and it seems to did the trick.

I'm running into another issue with temporary certificate but I guess just delete it work. I'm now able to build and run the project.

[ngducnghia]

So I can build with VS 2019, but when I run npx react-native run-windows --logging it still give me following error

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VisualStudio\v16.0\AppxPackage\Microsoft.AppXPackage.Targets(3
406,5): error APPX0104: Certificate file 'ReactWindows_TemporaryKey.pfx' not found. [C:\Users\nghia\source\repos\ReactWindows\windows\ReactWin
dows\ReactWindows.vcxproj]
C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VisualStudio\v16.0\AppxPackage\Microsoft.AppXPackage.Targets(3
406,5): error APPX0107: The certificate specified is not valid for signing. For more information about valid certificates, see http://go.micro
soft.com/fwlink/?LinkID=241478. [C:\Users\nghia\source\repos\ReactWindows\windows\ReactWindows\ReactWindows.vcxproj]

[acoates-ms]

That sounds like you didn't get the signing cert created during the initial project creation.

@asklar , I know you made a change to help fix this in master. But am I correct in saying that running npx react-native run-windows --force from an admin cmd prompt the first time, would get the cert generated?

[asklar]

That sounds like you didn't get the signing cert created during the initial project creation.

@asklar , I know you made a change to help fix this in master. But am I correct in saying that running npx react-native run-windows --force from an admin cmd prompt the first time, would get the cert generated?

@acoates-ms you shouldn't need to pass --force - we pass --force to the powershell script that sets up the cert anyway. So if you are running with my changes, you should see an elevation prompt if we need to elevate.
@NickGerleman I'm not sure how to tell which branch/release/tag it went into... how do I do that?

[ngducnghia]

Adding more info when I try to init project again:

[asklar]

@ngducnghia interesting, I haven't run into this before.
If you're comfortable with it maybe you can help us debug what is going wrong and we could add more logging to make it easier for folks to know what to do next.

The error message is coming from here

    try {
      const timeout = 10000; // 10 seconds;
      const thumbprint = childProcess.execSync(`powershell -command "Write-Output (New-SelfSignedCertificate -KeyUsage DigitalSignature -KeyExportPolicy Exportable -Subject 'CN=${currentUser}' -TextExtension @('2.5.29.37={text}1.3.6.1.5.5.7.3.3', '2.5.29.19={text}Subject Type:End Entity') -CertStoreLocation 'Cert:\\CurrentUser\\My').Thumbprint"`, {timeout}).toString().trim();
      if (!fs.existsSync(path.join(windowsDir, newProjectName))) {
        fs.mkdirSync(path.join(windowsDir, newProjectName));
      }
      childProcess.execSync(`powershell -command "$pwd = (ConvertTo-SecureString -String password -Force -AsPlainText); Export-PfxCertificate -Cert 'cert:\\CurrentUser\\My\\${thumbprint}' -FilePath ${path.join(windowsDir, newProjectName, newProjectName)}_TemporaryKey.pfx -Password $pwd"`, {timeout});
      console.log(chalk.green('Self-signed certificate generated successfully.'));
      return thumbprint;
      } catch (err) {
        console.log(chalk.yellow('Failed to generate Self-signed certificate. Using Default Certificate. Use Visual Studio to renew it.'));
        toCopyTempKey = true;
      }

We catch an exception but we don't print out what that exception is and we don't really know which of the powershell commands failed. Could you either try running the powershell commands in that snippet from a powershell window, or add a console.log(err); to the catch block so that we know what the exception being thrown is, and report back? I'm not able to reproduce this error otherwise I'd fix it on my end without bugging you :) Thanks for the help!

[ngducnghia]

@asklar I open the generator-windows/index.js in the node_modules, trying to add the log as you suggest, but then this error keep showing up on the screen

So I go into the .flowconfig to change it from ^0.105.0 to
[version]
^0.107.0

• run command npx react-native-windows-init --overwrite again, this time it successfully create the certificate
  

Then I run npx react-native run-windows but encounter another error:

looks like I am at the last step, I have developer mode on though

More info on the error when I try to run with VS Code
`

jest-haste-map: watch error:
  Error: EBUSY: resource busy or locked, open 'c:\Users\nghia\source\repos\ReactWindows\msbuild.ProjectImports.zip'
    at Object.openSync (fs.js:458:3)
    at Object.readFileSync (fs.js:360:35)
    at getContent (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:149:41)
    at Object.<anonymous> (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:199:9)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:78:24)
    at _next (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:98:9)
    at c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:103:7
    at new Promise (<anonymous>)
    at Object.<anonymous> (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:95:12)

jest-haste-map: watch error:
  Error: EBUSY: resource busy or locked, open 'c:\Users\nghia\source\repos\ReactWindows\msbuild.ProjectImports.zip'
    at Object.openSync (fs.js:458:3)
    at Object.readFileSync (fs.js:360:35)
    at getContent (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:149:41)
    at Object.<anonymous> (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:199:9)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:78:24)
    at _next (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:98:9)
    at c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:103:7
    at new Promise (<anonymous>)
    at Object.<anonymous> (c:\Users\nghia\source\repos\ReactWindows\node_modules\jest-haste-map\build\worker.js:95:12)

[Error] Error: Error while executing command 'c:\Users\nghia\source\repos\ReactWindows\node_modules\.bin\react-native.cmd run-windows --proxy --no-packager': Error while executing command 'c:\Users\nghia\source\repos\ReactWindows\node_modules\.bin\react-native.cmd run-windows --proxy --no-packager' (error code 101)`

[asklar]

@ngducnghia that error message is best effort, it can be the developer mode failing to turn on, or as you've discovered in your case, a certificate install issue. Can you rerun the last command with --logging?

[ngducnghia]

@asklar running as you suggested, encounter error

` Set-ItemProperty : Requested registry access is not allowed.
At C:\Users\nghia\source\repos\ReactWindows\node_modules\react-native-windows\local-cli\runWindows\utils\WindowsStoreAppUtils.ps1:91 char:5  
+     Set-ItemProperty -Path $RegistryKeyPath -Name AllowDevelopmentWit ...
+     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : PermissionDenied: (HKEY_LOCAL_MACH...\AppModelUnlock:String) [Set-ItemProperty], SecurityException
    + FullyQualifiedErrorId : System.Security.SecurityException,Microsoft.PowerShell.Commands.SetItemPropertyCommand`

So I open Shell in admin mode and run the command again, this time it success. Good lesson, should always try to run with logging first to see more detail on error

[asklar]

@asklar running as you suggested, encounter error

` Set-ItemProperty : Requested registry access is not allowed.
At C:\Users\nghia\source\repos\ReactWindows\node_modules\react-native-windows\local-cli\runWindows\utils\WindowsStoreAppUtils.ps1:91 char:5  
+     Set-ItemProperty -Path $RegistryKeyPath -Name AllowDevelopmentWit ...
+     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : PermissionDenied: (HKEY_LOCAL_MACH...\AppModelUnlock:String) [Set-ItemProperty], SecurityException
    + FullyQualifiedErrorId : System.Security.SecurityException,Microsoft.PowerShell.Commands.SetItemPropertyCommand`

So I open Shell in admin mode and run the command again, this time it success. Good lesson, should always try to run with logging first to see more detail on error

Good to hear! I actually already fixed that failure in 62 (see #4570), but since you were running npx instead of the code from RNW master, you were picking up an older version of RNW which didnt have my fix.

[asklar]

just realized that the elevation code I added applies to installing the app but not to enabling devmode so reactivating this