react-native-windows-init does not work inside a project whose package name is prefixed by an organisation

[shirakaba]

Problem Description

react-native-windows-init fails when run inside a project whose name (i.e. the "name" field in its package.json) is prefixed by an org. So, while a project name of react-native-app-auth-js is fine, @my-org/react-native-app-auth-js is not:

ENOENT: no such file or directory, mkdir 'C:\Users\jamie\git\my-monorepo\packages\react-native-app-auth-js\windows\@my-org\react-native-app-auth-js'Error: ENOENT: no such file or directory, mkdir 'C:\Users\jamie\git\my-monorepo\packages\react-native-app-auth-js\windows\@my-org\react-native-app-auth-js'
    at Object.mkdirSync (node:fs:1372:26)
    at createDir (C:\Users\jamie\git\my-monorepo\packages\react-native-app-auth-js\node_modules\@react-native-windows\cli\src\generator-common\index.ts:207:8)
    at copyProjectTemplateAndReplace (C:\Users\jamie\git\my-monorepo\packages\react-native-app-auth-js\node_modules\@react-native-windows\cli\src\generator-windows\index.ts:122:12)
    at generateWindows (C:\Users\jamie\git\my-monorepo\packages\react-native-app-auth-js\node_modules\@react-native-windows\cli\src\index.ts:77:38)   
    at Object.reactNativeWindowsInit (C:\Users\jamie\AppData\Local\npm-cache\_npx\966c6a96be6f5a32\node_modules\react-native-windows-init\src\Cli.ts:660:5) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'mkdir',
  path: 'C:\\Users\\jamie\\git\\my-monorepo\\packages\\react-native-app-auth-js\\windows\\@my-org\\react-native-app-auth-js'
}

The reason for failure is that, although it generates a directory named react-native-app-auth-js to write boilerplate into, it neglects to generate the parent directory @my-org.

Steps To Reproduce

1. First, in my monorepo, I made a package.
2. For the package's package.json, I set "name": "@my-org/react-native-app-auth-js".

Then, I ran this command, and it failed:

npx --yes react-native-windows-init --overwrite --projectType=app --useHermes --experimentalNuGetDependency --language=cpp --namespace=jp.example.ReactNativeAppAuthJs.demo

I found that if I renamed the package from @my-org/react-native-app-auth-js to react-native-app-auth-js, the command ran fine.

Expected Results

The CLI should support org prefixes in package names.

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

  WARNING: You should run npx react-native@latest to ensure you're always using the most current version of the CLI. NPX has cached version (0.73.9) != current release (0.74.5)
  
info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (4) x64 Apple Silicon
  Memory: 1.47 GB / 7.99 GB
Binaries:
  Node:
    version: 20.15.0
    path: ~\AppData\Local\Volta\tools\image\node\20.15.0\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Local\Volta\tools\image\yarn\1.22.22\bin\yarn.CMD
  npm:
    version: 10.7.0
    path: ~\AppData\Local\Volta\tools\image\node\20.15.0\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.10.35027.167 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.9
    wanted: ~0.73.9
  react-native-windows:
    installed: 0.73.19
    wanted: ~0.73.17
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

None

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

Visual Studio 2022

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[jonthysell]

As react-native-windows-init will be marked as deprecated in 0.75, you can use the new init-windows command which allows you to specify whatever name and/or namespace you want for the native code, rather than strictly relying the value in package.json. There's a lot of tangled up history in what names do/don't work in the old command (as the one string is frankly overused in the templates, for more than just file names) and the rules for that string have also changed over the years.

Anyway, while technically we're "launching" this new command in 0.75, I believe it's already in a working state in 0.73. If you've already added react-native-windows to your project, try using npx react-native init-windows with any of the available "old/" templates, the list of which you can see via a preview the upcoming docs here: https://microsoft.github.io/react-native-windows/docs/next/init-windows-cli.

Caution: The new architecture templates available from this command are in no way ready or supported, especially in whatever state they were in in RNW 0.73.

[shirakaba]

@jonthysell Thank you! Could you point me at the code for the init-windows CLI and the locations of the templates that it references? I've been struggling to find details about it.

EDIT: I guess the templates for init-windows are in react-native-windows/vnext/templates, though I'm not clear where the code for the init-windows CLI is.