create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

CRA Installs an old version of react-scripts and generates throws "The react-scripts version you're using is not compatible with the --template option."

Open yaritaft opened this issue 2 years ago • 4 comments


UPDATE: I tried doing: yarn create react-app my-app --template typescript And it works fine. I think the issue has to do with linux and npm/npx.

Describe the bug

I have a fresh install of Ubuntu 20 and when I do

npx create-react-app my-app --template typescript I get this error: The react-scripts version you're using is not compatible with the --template option.

image

I did control + C but if I let the script continue it creates the react app without typescript.

And my app is created with Javascript and no tsx files. I checked on the package.json generated by cra. And I see this:

{ "name": "my-app7", "version": "0.1.0", "private": true, "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "0.9.5" <---- I THINK THE ISSUE IS RIGHT HERE }, "devDependencies": {}, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

I did some research but I was not able to find how to specify the react-scripts version that cra should install. I tried also to create this app with a windows computer with same Node version and CRA 5.0.0 and It works fine. That's why I think it has to do with linux.

I have already checked with which that create-react-app is not installed globally. And I did the same with react-scripts.

Did you try recovering your dependencies?

Things that I did:

  • npm -g uninstall create-react-app react-scripts
  • Cleaning npm cache with
  • npm uninstall -g create-react-app && npm i -g npm@latest && sudo npm cache clean -f && npx create-react-app my-app --template typescript
  • Did npx create-react-app --version and I get 5.0.0
  • Did npx clear-npx-cache

With every single try I created a new app.

Environment

After running: npx create-react-app --info

current version of create-react-app: 5.0.0 running from /home/yari/.npm/_npx/24521/lib/node_modules/create-react-app

System: OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa) CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor Binaries: Node: Not Found Yarn: Not Found npm: Not Found Browsers: Chrome: 100.0.4896.60 Firefox: 98.0.2 npmPackages: react: Not Found react-dom: Not Found react-scripts: Not Found npmGlobalPackages: create-react-app: Not Found

Although it says I have no binary for node and npm I have them installed and working.

  • Node in /snap/bin/node
  • NPM in /snap/bin/npm

Steps to reproduce

  1. npx create-react-app my-app --template typescript

Expected behavior

I want to get tsx files with Typescript applied.

Actual behavior

I get js files.

yaritaft avatar Apr 07 '22 13:04 yaritaft

I have the same issue as @yaritaft . I'm using Ubuntu 20.04 LTS. npm cache clean, uninstall of CRA did not help. I'm using snap version of npm 8.5.5 and node 16.15.0. yarn create react-app my-app --template typescript works

csuzdy avatar May 21 '22 07:05 csuzdy

This is occurring because in packages/create-react-app/createReactApp.js, in the function checkNpmVersion(), execSync('npm --version').toString().trim() is returning an empty string, causing the subsequent semver.gte(npmVersion, '6.0.0') call to error out. Presumably, execSync() isn't executing with the npm snap on its path; notably, if npx create-react-app --info is run, under Binaries, Node and npm both display as "Not Found".

I can hack around this by doing the following:

  1. npm install create-react-app
  2. Editing node_modules/create-react-app/createReactApp.js to hardcode npmVersion to the correct number (8.17.0, in my case)
  3. node ./node_modules/create-react-app/index.js, followed by normal CRA arguments

ghost avatar Aug 11 '22 03:08 ghost

Thanks @VioletRose now it is working fine again npx with cra. I think it was fixed in newer versions ! If you still have the issue you can try an easier fix that is the one mentioned in my post (the yarn one). Or maybe is because I no longer have node installed on my env and now I only have nvm and I use node only through nvm, that fixes the issue too ! As you said it seems to be an issue with snap node and npm. Fixes: using node with nvm (without having any node installation) or using yarn

yaritaft avatar Aug 11 '22 03:08 yaritaft

Node is unable to spawn some snap programs due to sandbox limitations.

thus as VioletRose noticed correctly, execSync does not return any data, since node cannot run the snap binary from within the sandbox. meaning if node would be run by calling the true path of node /snap/node/6694/bin/node (in my case with current version) with npm location as arg (which npm) like this: execSync(process.execPath + ' $(which npm) --version').toString().trim() where $(where npm) returns the path of the npm binary, which in my case is not inside snap, but in /usr/local/bin/npm and process.execPath is the true path to the running node executable inside the snap node bin folder mentioned above.

This is kinda a mess of a command, but it sure works with any snap snap install, since they also contain the which command by default.
output is the following:

> execSync(process.execPath +' $(which npm) --version').toString().trim()
'8.19.2'

Temporary solution: (alternative to installing create-react-app and editing source. with this you dont need to edit source)

  1. go to a folder of your choice (take the same folder where your project is going to be created)
  2. run npm install node@[yourNodeVersion] (Check your version before with node --version omit the leading v)
  3. then run your CRA command npx create-react-app myapp --template [whateverTemplateYouWant]
  4. cd into your project folder & check if everything is there (or run npm start)
  5. cd back into the above folder (cd ..)
  6. now you can remove the "node_modules" folder as well as package and package-lock again (Make sure that you are NOT in your project folder!, else, repeat above steps)

Bloodiko avatar Sep 15 '22 17:09 Bloodiko

the same problem, please fix it. yarn helped...

lismgmk avatar Feb 09 '23 10:02 lismgmk

I got the same issue at Ubuntu 22.04 and tried nodeJS stable/edge snap versions. But if you install snap version, there is no easy solution with snap node installs. On the other hand Ubuntu dep repo's nodeJS version is v12 and outdated. I suggest that you can install deb or snap version and then set npm prefix to your local: npm config set prefix ~/.local.
Then install latest nodejs lts version as global in your user local: npm i -g node@lts
Finally update/installl npm as global in your user local: npm i -g npm
With these steps, you will install node and npm in your user local as global. You can check current node version and npm prefix in terminal:
which node -> like /home/YOUR_USERNAME/.local/bin/node which npm -> like /home/YOUR_USERNAME/.local/bin/node npm config get prefix -> like /home/YOUR_USERNAME/.local

cihatertem avatar Mar 05 '23 09:03 cihatertem

Same problem

GeorgePaulino avatar May 06 '23 09:05 GeorgePaulino