Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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." #12253

Open
yaritaft opened this issue Apr 7, 2022 · 7 comments

Comments

@yaritaft
Copy link

yaritaft commented Apr 7, 2022


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.

@csuzdy
Copy link

csuzdy commented May 21, 2022

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

@VioletRose
Copy link

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

@yaritaft
Copy link
Author

yaritaft commented Aug 11, 2022

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

@Bloodiko
Copy link

Bloodiko commented Sep 15, 2022

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)

@lismgmk
Copy link

lismgmk commented Feb 9, 2023

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

@cihatertem
Copy link

cihatertem commented Mar 5, 2023

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

@GeorgePaulino
Copy link

Same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants