If local template directory include `@`, package name & version is broken

[norux]

Describe the bug

I use monorepo in following project directory: Users/user/git/my-project/packages/@myscope/packages-{a,b,c}
And, my cra-template package lay on @myscope's sub-directory.

If I try,

$ create-react-app my-app --template "file:Users/user/git/my-project/packages/@myscope/cra-template-mine"

Receive error Cannot find module: file:Users/user/git/my-project/packages from react-scripts

I found following:

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

Lines 708 to 721 in 759696d

	} else if (installPackage.match(/.+@/)) {
	// Do not match @scope/ when stripping off @version or @tag
	return Promise.resolve({
	name: installPackage.charAt(0) + installPackage.substr(1).split('@')[0],
	version: installPackage.split('@')[1],
	});
	} else if (installPackage.match(/^file:/)) {
	const installPackagePath = installPackage.match(/^file:(.*)?$/)[1];
	const { name, version } = require(path.join(
	installPackagePath,
	'package.json'
	));
	return Promise.resolve({ name, version });
	}

I think else if (installPackage.match(/^file:/)) this condition must be above else if (installPackage.match(/.+@/))

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

N/A

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/user/.nvm/versions/node/v12.18.2/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.2/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: 3.4.1

Steps to reproduce

test custom template in local to use file:

$ create-react-app my-app --template "file:Users/user/git/my-project/packages/@myscope/cra-template-mine"

Expected behavior

Get package name & version from Users/user/git/my-project/packages/@myscope/cra-template-mine/package.json

Actual behavior

package name: Users/user/git/my-project/packages
package version: myscope/cra-template-mine

Reproducible demo

user:cra $ create-react-app he --template "file:./@myscope/cra-template-mine"

Creating a new React app in /Users/user/test/cra/he.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with file:/Users/user/test/cra/...

yarn add v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 15 new dependencies.
info Direct dependencies
├─ cra-template-linepay@1.0.0
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1
info All dependencies
├─ @babel/helper-member-expression-to-functions@7.10.5
├─ @babel/plugin-syntax-typescript@7.10.4
├─ @babel/plugin-transform-flow-strip-types@7.9.0
├─ @babel/plugin-transform-runtime@7.9.0
├─ @babel/plugin-transform-typescript@7.10.5
├─ @babel/preset-typescript@7.9.0
├─ babel-preset-react-app@9.1.2
├─ cra-template-linepay@1.0.0
├─ eslint-config-react-app@5.2.1
├─ react-dev-utils@10.2.1
├─ react-dom@16.13.1
├─ react-error-overlay@6.0.7
├─ react-scripts@3.4.1
├─ react@16.13.1
└─ scheduler@0.19.1
✨  Done in 23.17s.
internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module 'file:/Users/user/test/cra/'
Require stack:
- /Users/user/test/cra/he/node_modules/react-scripts/scripts/init.js
- /Users/user/test/cra/he/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.resolve (internal/modules/cjs/helpers.js:78:19)
    at module.exports (/Users/user/test/cra/he/node_modules/react-scripts/scripts/init.js:110:13)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:120:20)
    at Object.runInThisContext (vm.js:311:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at evalScript (internal/process/execution.js:94:25)
    at internal/main/eval_string.js:23:3 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/user/test/cra/he/node_modules/react-scripts/scripts/init.js',
    '/Users/user/test/cra/he/[eval]'
  ]
}

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting he/ from /Users/user/test/cra
Done.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[eckdanny]

I found this issue falling into same code path as @norux. I use @context dirs often (e.g.; ~/workspaces/{@work,@play}) freely. The templateInfo path/version doesn't get parsed correctly if contains @

+1 proposed resolution: just swap the order