Unable to run `create-react-app` with the `--template typescript` option

Every time I try to execute the following command:

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

only a JavaScript project is created, without any .tsx files.

  • After consulting the CRA's TypeScript guide, it appears that the command requires Node.js version 
    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f1e6e2e0f7afe1f1e0fbf2e6e1d2b0acb3acb3">[email protected]</a>
    or higher.
  • However, the version specified in the package.json file of my-app is only 0.9.5.
  • The globally installed version is actually 
    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdbfd8dcced997c9d9c8d3cadcdbe4908e908e909081fa959b95">[email protected]</a>
    , which is the most recent one available.

My current environment specifications are as follows:

  • Node 16.13.2 (installed using this reference)
  • npm 8.4.1
  • npx 5.0.0
  • Xubuntu 21.10
typescriptnpmcreate-react-appnpx

Answer №1

Seems like your version of create-react-app installed globally is quite outdated, causing npx to reference it instead of the latest one. To rectify this issue, follow these steps:

npm uninstall -g create-react-app

Afterwards, running npx create-react-app should pull the most recent version, enabling proper command line functionality.

(I conducted a test where I globally installed an older version, used npx, and indeed, the old version executed. With v1.0.0 installed, the --template argument did not function as expected. Surprisingly, it even incorporated react-scripts v5.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to eliminate file nesting in Visual Studio 2017

Is there a way to prevent certain file types from being nested within other files, such as .ts files not being nested beneath .html files? I came across this request, but has anyone found a solution to achieve this? ...

visual-studiotypescript

The plugin 'react' could not be loaded as it was declared in 'package.json', specifically in 'eslint-config-react-app'. The error encountered was an unexpected end of input

After successfully creating a React project, everything was running smoothly until an error popped up stating: Failed to load plugin 'react' declared in 'package.json » eslint-config-react-app » D:\Dev\fegig\omega\trade ...

reactjsnpmpackage.json

Implementing a ReactJS component with a TypeScript interface for displaying an Alert box message using Material

I have a MUI Alert box in my application where I am trying to change the message inside with an href URL. However, when I use the herf tag, it shows as text instead of a link. How can I make it display as an actual link? In the code below, when I click th ...

reactjstypescriptmaterial-uireact-typescript

Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

While working on a project with keycloak, I've encountered an issue that I can't seem to figure out. After logging in and navigating to my project's page, everything operates smoothly. However, if I happen to refresh the page before logging ...

angulartypescriptkeycloakkeycloak-angularkeycloak-js

Inference in Typescript - Detecting unknown key in an object

I am struggling to implement type inference from a props object that is passed to a component and then used in a render function. While I can retrieve the keys of the object correctly, all types are being interpreted as unknown. I need some assistance in f ...

typescriptobjecttype-inference

Why am I getting the npm login error message 'Public registration is disabled'?

After attempting to run npm login, I encountered a 403 error message stating "Public registration is not allowed". However, I am able to successfully log in from the webpage https://www.npmjs.com. What might be causing this issue? npm ERR! code E403 npm ...

npm

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

While working on my Ionic project, I encountered an error in Angular when trying to fetch data from an API using HttpClient. The error message that popped up was 'Property 'name' does not exist on type '{}'.'. Below is the cod ...

javascriptangulartypescriptionic-frameworkionic2

Tips for updating the value within a textfield in HTML

I am looking to dynamically update the value displayed in my Revenue textfield by subtracting the Cost of Goods from the Sales Price. I have included an image of the current layout for reference, but I want the Revenue field to reflect the updated value af ...

javascripthtmlangulartypescripttextfield

Contrasting NPM and NVM: Which is Right for You?

It seems that I have confused the roles of npm and nvm in my development and production setup. While trying to automate the installation process using Bash, I realized that I forgot the correct order in which to install them. Initially, after installing np ...

node.jsnpmnvm

You do not have the necessary permissions to install global npm packages due to an EACE

Whenever I attempt to globally install something like gulp, sass, webpack, etc. using sudo npm install packagename -g, I consistently encounter these errors: node-pre-gyp WARN Hit error EACCES: permission denied, mkdir '/usr/local/lib/node_modules/web ...

node.jsnpmterminalpermissions

Volar and vue-tsc are producing conflicting TypeScript error messages

During the development of my project using Vite, Vue 3, and TypeScript, I have set up vue-tsc to run in watch mode. I am utilizing VS Code along with Volar. This setup has been helpful as it displays all TypeScript errors in the console as expected, but I ...

typescriptvue.jsvuejs3vscode-extensionsvite

Screening strings and arrays based on multiple criteria

My code is below and I am trying to have the bot check for two specific conditions in the user's message. The message must contain "how" plus either "doing" or "bread". It works perfectly when using only "doing" but not when adding the "bread" conditi ...

javascriptnpmdiscorddiscord.js

Error: Package.js detected multiple versions of fbjs installed

While attempting to update from version 0.10.5 to 0.11.0, I encountered the following error message. Surprisingly, gbjs is not even included in my package.js file. [compileVendorDll] ERROR in fbjs [compileVendorDll] Multiple versions of fbjs found: [com ...

reactjsnpmnode-modulesyarnpkg

The function cloneElement does not share any properties with the type Partial<P> and Attributes

I'm encountering a perplexing issue with my code. When I attempt to call cloneElement with the second parameter being of type Type { foo: number } has no properties in common with type 'Partial<Child> & Attributes', TypeScript thro ...

reactjstypescriptdefinitelytyped

Am I effectively implementing async await in TypeScript?

I'm not quite sure if I'm using the async/await functionality correctly in my TypeScript and Protractor code. Looking at the code snippet below, the spec uses await to call the page object, which itself is an async/await function. The page object ...

typescriptasync-awaitprotractor

Problem with file permissions in Linux (Node Package Manager's node_modules folder)

I am facing difficulties in managing permissions for my node_modules directory. The issue is as follows... When user1 installs packages using npm install, the resulting node_modules directory is owned by user1. Subsequently, when user2 attempts to instal ...

linuxubuntupermissionsnpmacl

React is unable to assign a class field beyond the scope of axios

class App extends React.Component { app: Application; ... componentDidMound() { axios.get(…).then(res => { this.app.currentUser = res.data.data; // setting value inside lambda function. console.log(this.app.currentUser); // ...

javascriptreactjstypescriptaxios

The issue encountered during the construction of the nrwl library project is that object Object is not recognized as a PostCSS

We are currently facing an issue with our nrwl-nx workspace library project (based on Angular 8) that contains 3-4 angular libraries. While the ng serve function works properly, we have started encountering errors when trying to run ng build my-lib. On ou ...

angularnpmangular-clinrwl-nxng-build

What are some strategies for preventing unused setState functions in React? Is it possible to create a React useState without a setter function

Currently working on reducing or eliminating npm warnings related to the React site. Many of these warnings are due to the setState function, which is marked as 'unused' in the code snippet below. const [state, setState] = useState('some st ...

javascriptreactjsnpmuse-state

Ways to troubleshoot this issue: encountering error in Angular v11 - The Schematic workflow has encountered a failure

I keep encountering an error whenever I try to generate a new project Command I used: ng new dron (to create the project) Error message: npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1767786463746464572f39253 ...

node.jsangularnpm