Fix playground composition for Node.js 24.x

change/react-native-windows-9d93df46-79f8-4116-b0c8-7985a9c67d91.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix project compilation",
+  "packageName": "react-native-windows",
+  "email": "vmorozov@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/playground/metro.config.js

@@ -9,13 +9,23 @@ const {makeMetroConfig} = require('@rnw-scripts/metro-dev-config');
 const fs = require('fs');
 const path = require('path');
 
-const rnwPath = fs.realpathSync(
+// On Windows, require.resolve through symlinks (e.g. yarn workspace links) can
+// return paths with a different drive letter case than process.cwd(). Metro's
+// file system lookup is case-sensitive, so we normalize to match cwd.
+function normalizePathDrive(p) {
+  if (process.platform === 'win32' && p.length >= 2 && p[1] === ':') {
+    return process.cwd()[0] + p.slice(1);
+  }
+  return p;
+}
+
+const rnwPath = normalizePathDrive(fs.realpathSync(
   path.dirname(require.resolve('react-native-windows/package.json')),
-);
+));
 
-const rnwTesterPath = fs.realpathSync(
+const rnwTesterPath = normalizePathDrive(fs.realpathSync(
   path.dirname(require.resolve('@react-native-windows/tester/package.json')),
-);
+));
 
 const devPackages = {
   'react-native': path.normalize(rnwPath),
@@ -144,8 +154,25 @@ function tryResolveDevRelativeImport(
   return null;
 }
 
-module.exports = makeMetroConfig({
+const baseConfig = makeMetroConfig({
   resolver: {
     resolveRequest: devResolveRequest,
   },
 });
+
+// The getModulesRunBeforeMainModule paths (from @rnx-kit/metro-config) may have
+// wrong drive letter case on Windows due to require.resolve through symlinks.
+// Metro compares these paths via strict equality against module paths in the
+// bundle graph, so the case must match exactly.
+const originalGetModulesRunBeforeMainModule =
+  baseConfig.serializer.getModulesRunBeforeMainModule;
+baseConfig.serializer = {
+  ...baseConfig.serializer,
+  getModulesRunBeforeMainModule: (...args) => {
+    return originalGetModulesRunBeforeMainModule(...args).map(p =>
+      normalizePathDrive(fs.realpathSync(p)),
+    );
+  },
+};
+
+module.exports = baseConfig;

packages/playground/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.54",
   "private": true,
   "scripts": {
-    "start": "npx @react-native-community/cli rnx-start",
+    "start": "react-native rnx-start",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
-    "windows": "npx @react-native-community/cli run-windows"
+    "windows": "react-native run-windows"
   },
   "dependencies": {
     "@react-native-picker/picker": "2.11.0",

packages/playground/windows/playground-composition.sln

@@ -29,6 +29,9 @@ EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Include", "..\..\..\vnext\include\Include.vcxitems", "{EF074BA1-2D54-4D49-A28E-5E040B47CD2E}"
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "SampleCustomComponent", "..\..\sample-custom-component\windows\SampleCustomComponent\SampleCustomComponent.vcxproj", "{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}"
+	ProjectSection(ProjectDependencies) = postProject
+		{F7D32BD0-2749-483E-9A0D-1635EF7E3136} = {F7D32BD0-2749-483E-9A0D-1635EF7E3136}
+	EndProjectSection
 EndProject
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		..\..\..\vnext\Shared\Shared.vcxitems*{2049dbe9-8d13-42c9-ae4b-413ae38fffd0}*SharedItemsImports = 9

vnext/Directory.Build.targets

@@ -4,21 +4,29 @@
   <!-- This import will noop when customer code is built. This import is here to help building the bits in the react-native-windows repository. -->
   <Import Condition="Exists($([MSBuild]::GetPathOfFileAbove('Directory.Build.targets', '$(MSBuildThisFileDirectory)../')))" Project="$([MSBuild]::GetPathOfFileAbove('Directory.Build.targets', '$(MSBuildThisFileDirectory)../'))" />
 
-  <!--Allow implicitly restoring NuGet dependencies in C++ projects using the Visual Studio IDE.-->
-  <Target Name="BeforeResolveReferences" Condition="'$(BuildingInsideVisualStudio)' == 'true' AND '$(MSBuildProjectExtension)' == '.vcxproj'">
+  <!--
+    Allow implicitly restoring NuGet dependencies in C++ and C# projects using the Visual Studio IDE.
+
+    For vcxproj: VS does not automatically restore PackageReference or packages.config dependencies.
+    For csproj referencing vcxproj: VS's NuGet restore cannot evaluate vcxproj PackageReferences
+    through the project reference chain (the VC project system does not report them via the CPS
+    nomination API), causing NU1004 lock file mismatches. An explicit msbuild /t:Restore during
+    the build resolves this because msbuild loads VCTargets and evaluates vcxproj fully.
+  -->
+  <Target Name="BeforeResolveReferences" Condition="'$(BuildingInsideVisualStudio)' == 'true' AND ('$(MSBuildProjectExtension)' == '.vcxproj' OR '$(MSBuildProjectExtension)' == '.csproj')">
     <!--
       Ensure restoring of PackageReference dependencies.
     -->
     <MSBuild Projects="$(MSBuildProjectFile)" Targets="Restore" Properties="RestoreProjectStyle=PackageReference" Condition="@(PackageReference->Count()) &gt; 0" />
 
     <!--
-      Ensure restoring of packages.config dependencies.
+      Ensure restoring of packages.config dependencies (vcxproj only).
 
       RestoreProjectStyle=PackagesConfig    - Required to use the packages.config mechanism
       RestorePackagesConfig=true            - Required to use the packages.config mechanism
       RestoreUseStaticGraphEvaluation=false - Override setting from Directory.Build.props
     -->
-    <MSBuild Projects="$(MSBuildProjectFile)" Targets="Restore" Properties="RestoreProjectStyle=PackagesConfig;RestorePackagesConfig=true;RestoreUseStaticGraphEvaluation=false" />
+    <MSBuild Projects="$(MSBuildProjectFile)" Targets="Restore" Properties="RestoreProjectStyle=PackagesConfig;RestorePackagesConfig=true;RestoreUseStaticGraphEvaluation=false" Condition="'$(MSBuildProjectExtension)' == '.vcxproj'" />
   </Target>
 
   <!-- This ensures NuGet restores use the nuget config's feed and not any pre-installed files. -->

vnext/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -411,9 +411,6 @@
       </PreprocessorDefinitions>
     </ResourceCompile>
   </ItemGroup>
-  <ItemGroup>
-    <Natvis Include="$(ExternalDir)folly\Folly.natvis" />
-  </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\Common\Common.vcxproj">
       <Project>{fca38f3c-7c73-4c47-be4e-32f77fa8538d}</Project>

vnext/PropertySheets/Autolink.props

@@ -7,7 +7,7 @@
 
   <PropertyGroup>
     <RunAutolinkCheck Condition="'$(RunAutolinkCheck)' == ''">true</RunAutolinkCheck>
-    <AutolinkCommand Condition="'$(AutolinkCommand)' == ''">npx --yes @react-native-community/cli autolink-windows</AutolinkCommand>
+    <AutolinkCommand Condition="'$(AutolinkCommand)' == ''">npx --yes --no-workspaces @react-native-community/cli autolink-windows</AutolinkCommand>
     <AutolinkCommandWorkingDir Condition="'$(AutolinkCommandWorkingDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(ProjectDir), 'package.json'))</AutolinkCommandWorkingDir>
     <AutolinkCommandArgs Condition="'$(AutolinkCommandArgs)' == '' And '$(SolutionPath)' != '' And '$(SolutionPath)' != '*Undefined*' And '$(ProjectPath)' != ''">--check --sln "$([MSBuild]::MakeRelative($(AutolinkCommandWorkingDir), $(SolutionPath)))" --proj "$([MSBuild]::MakeRelative($(AutolinkCommandWorkingDir), $(ProjectPath)))"</AutolinkCommandArgs>
     <AutolinkCommandArgs Condition="'$(AutolinkCommandArgs)' == ''">--check</AutolinkCommandArgs>

vnext/PropertySheets/Bundle.props

@@ -39,7 +39,7 @@
     <BundlerExtraArgs Condition="'$(BundlerExtraArgs)' == ''">--minify false</BundlerExtraArgs>
 
     <!-- Command to use to create a bundle -->
-    <BundleCliCommand Condition="'$(BundleCliCommand)' == ''">npx @react-native-community/cli bundle</BundleCliCommand>
+    <BundleCliCommand Condition="'$(BundleCliCommand)' == ''">npx --yes --no-workspaces @react-native-community/cli bundle</BundleCliCommand>
 
     <!-- This should be the app package root, this is where the bundle command will be run from -->
     <BundleCommandWorkingDir Condition="'$(BundleCommandWorkingDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(ProjectDir), 'package.json'))</BundleCommandWorkingDir>

vnext/PropertySheets/Codegen.props

@@ -7,7 +7,7 @@
 
   <PropertyGroup>
     <RunCodegenWindows Condition="'$(RunCodegenWindows)' == ''">true</RunCodegenWindows>
-    <CodegenCommand Condition="'$(CodegenCommand)' == ''">npx --yes @react-native-community/cli codegen-windows</CodegenCommand>
+    <CodegenCommand Condition="'$(CodegenCommand)' == ''">npx --yes --no-workspaces @react-native-community/cli codegen-windows</CodegenCommand>
     <CodegenCommandWorkingDir Condition="'$(CodegenCommandWorkingDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(ProjectDir), 'package.json'))</CodegenCommandWorkingDir>
     <CodegenCommandArgs Condition="'$(CodegenCommandArgs)' == ''">--logging</CodegenCommandArgs>
   </PropertyGroup>

vnext/PropertySheets/NuGet.LockFile.props

@@ -9,6 +9,14 @@
 
   <PropertyGroup>
     <RestoreLockedMode Condition="'$(RestoreLockedMode)'=='' OR '$(BuildingInRnwRepo)'=='true'">true</RestoreLockedMode>
+    <!--
+      VS's NuGet restore cannot evaluate vcxproj PackageReferences through the project reference
+      chain (the VC project system does not report them via the CPS nomination API). This causes
+      NU1004 lock file mismatches for csproj files that reference vcxproj. Disable locked mode
+      in VS so the initial restore succeeds and package targets load correctly.
+      CI is unaffected: it passes /p:RestoreLockedMode=true as a global property which overrides this.
+    -->
+    <RestoreLockedMode Condition="'$(BuildingInsideVisualStudio)' == 'true' AND '$(MSBuildProjectExtension)' == '.csproj'">false</RestoreLockedMode>
 
     <NuGetLockFileName>packages</NuGetLockFileName>
     <NuGetLockFileName Condition="'$(UseExperimentalWinUI3)'=='true'">$(NuGetLockFileName).experimentalwinui3</NuGetLockFileName>

vnext/template/metro.config.js

@@ -3,9 +3,19 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 const fs = require('fs');
 const path = require('path');
 
-const rnwPath = fs.realpathSync(
+// On Windows, require.resolve through yarn workspace junctions can return paths
+// with a different drive letter case than process.cwd(). Metro's internal file
+// system lookup is case-sensitive, so we normalize to match cwd.
+function normalizePathDrive(p) {
+  if (process.platform === 'win32' && p.length >= 2 && p[1] === ':') {
+    return process.cwd()[0] + p.slice(1);
+  }
+  return p;
+}
+
+const rnwPath = normalizePathDrive(fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
-);
+));
 
 //{{#devMode}} [devMode
 const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules');

vnext/templates/cpp-app/metro.config.js

@@ -3,9 +3,19 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 const fs = require('fs');
 const path = require('node:path');
 
-const rnwPath = fs.realpathSync(
+// On Windows, require.resolve through yarn workspace junctions can return paths
+// with a different drive letter case than process.cwd(). Metro's internal file
+// system lookup is case-sensitive, so we normalize to match cwd.
+function normalizePathDrive(p) {
+  if (process.platform === 'win32' && p.length >= 2 && p[1] === ':') {
+    return process.cwd()[0] + p.slice(1);
+  }
+  return p;
+}
+
+const rnwPath = normalizePathDrive(fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
-);
+));
 
 //{{#devMode}} [devMode
 const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules');

vnext/templates/cpp-lib/example/metro.config.js

@@ -7,9 +7,19 @@ const pack = require('../package.json');
 const root = path.resolve(__dirname, '..');
 const modules = Object.keys({ ...pack.peerDependencies });
 
-const rnwPath = fs.realpathSync(
+// On Windows, require.resolve through yarn workspace junctions can return paths
+// with a different drive letter case than process.cwd(). Metro's internal file
+// system lookup is case-sensitive, so we normalize to match cwd.
+function normalizePathDrive(p) {
+  if (process.platform === 'win32' && p.length >= 2 && p[1] === ':') {
+    return process.cwd()[0] + p.slice(1);
+  }
+  return p;
+}
+
+const rnwPath = normalizePathDrive(fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
-);
+));
 
 //{{#devMode}} [devMode
 const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules');