Solved: Standalone React Project - The {directory} contains files that could conflict.

I recently came across this tutorial on the new standalone javascript projects in Visual Studio 2022 via this blog post courtesy of Scott Hanselman. I was excited with the prospect of having standalone javascript projects inside of Visual Studio. Unfortunately I couldn't move past the first step of creating the project as I was getting the below error in the npm command line window:

Error showing in Visual Studio

The "The directory {directory} contains files that could conflict." error in npm.

It turns out that the issue is being caused by the solution being placed in the same directory as the project file. In my case, the new project screen defaulted to include the solutiona and project in the same directory causing this issue. All you need to do is make sure the the "Place solution and project in the same directory" tick box is unticked as per the below screenshot:

Image showing the solution

Configure your new project screen in Visual Studio 2022

I don't quite understand why Microsoft are providing this option if it causes the project to be created, however, I'm glad that I can now get started with testing these new project types.