Unable to target a scoped NPM package template

[klasbj]

Describe the bug

It is not possible to reference a scoped package with the --template switch, e.g. @CompanyName/cra-template-company-react-template.

Did you try recovering your dependencies?

No

Which terms did you search for in User Guide?

N/A

Environment

$ npx create-react-app@next --scripts-version=@next --info
npx: installed 91 in 17.565s

Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Binaries:
    Node: 12.3.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.771.0
    Internet Explorer: 11.0.17763.771
  npmPackages:
    react: ^16.12.0 => 16.12.0
    react-dom: ^16.12.0 => 16.12.0
    react-scripts: 3.3.0-next.62 => 3.3.0-next.62
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Run create-react-app referencing a template in a scoped package:
   npx create-react-app@next --scripts-version=@next --template=@klasbj/cra-template-scoped app-name

Expected behavior

The app should have been created based on the template in the scoped package.

Actual behavior

create-react-app tries to instantiate the project based on the NPM package cra-template-@klasbj/cra-template-scoped instead, which obviously fails.

Full output:

$ npx create-react-app@next --scripts-version=@next --template=@klasbj/cra-template-scoped app-name2
npx: installed 91 in 19.44s

Creating a new React app in C:\Users\kl-bjo\work\temp\app-name2.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-...

npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t ssh://[email protected]/klasbj/cra-template-scoped.git
npm ERR!
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\kl-bjo\AppData\Roaming\npm-cache\_logs\2019-11-15T16_33_25_096Z-debug.log

Aborting installation.
  npm install --save --save-exact --loglevel error react react-dom react-scripts@next cra-template-@klasbj/cra-template-scoped has failed.

Deleting generated file... package.json
Deleting app-name2/ from C:\Users\kl-bjo\work\temp
Done.

I didn't let it connect to github, hence the errors in the middle.

Reproducible demo

The above template @klasbj/cra-template-scoped is available on npm for demo.

[klasbj]

This functionality seems to be the cause:

create-react-app/packages/create-react-app/createReactApp.js

Lines 652 to 654 in 971f249

	} else if (!template.startsWith(templateToInstall)) {
	// Add prefix `cra-template` to non-prefixed templates.
	templateToInstall += `-${template}`;

We were able to work around it by specifying the .tgz file instead, but it would be nice if it worked out of the box.

[ianschmitz]

Thanks for the report @klasbj. Seems very reasonable.

@mrmckeb what are your thoughts?

[mrmckeb]

I agree, this is something we should aim to fix ASAP. This block of code will go completely in v4, but is needed for legacy support.

This check !template.startsWith(templateToInstall) probably just needs to be regex instead.

const isValidTemplate = (template) => /^(@[a-z\d][\w-.]+\/)?(cra-template-[a-z\d][\w-.]+)/i.test(template);

https://regexr.com/4ovl1

@klasbj would you like to make a PR? Ping me and I'd be happy to help out.

Otherwise, I can look at it this week.

[klasbj]

@mrmckeb Sure, I'll give it a go!

[mrmckeb]

Thanks again, this is now merged and will be in the release.