Encountering an issue while attempting to create an app with the "create T3

While developing an application using the command npm create t3-app@latest, I encountered a strange error after navigating to the project directory and running npm run dev:

npm run dev             

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecfcdcddbc3dbc2cfdac1dcee9e809f809e">[Email Protected]</a> dev
> next dev

(node:29350) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/mm/localCode/projects/accumulator/node_modules/next/dist/server/web/spec-extension/request.js:28
class NextRequest extends Request {
                         ^

ReferenceError: Request is not defined
   at Object.<anonymous> (/Users/mm/localCode/projects/accumulator/node_modules/next/dist/server/web/spec-extension/request.js:28:27)
   at Module._compile (node:internal/modules/cjs/loader:1101:14)
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
   at Module.load (node:internal/modules/cjs/loader:981:32)
   at Function.Module._load (node:internal/modules/cjs/loader:822:12)
   at Module.require (node:internal/modules/cjs/loader:1005:19)
   at Module.mod.require (/Users/mm/localCode/projects/accumulator/node_modules/next/dist/server/require-hook.js:64:28)
   at require (node:internal/modules/cjs/helpers:102:18)
   at Object.<anonymous> (/Users/mm/localCode/projects/accumulator/node_modules/next/dist/server/web/spec-extension/adapters/next-request.js:37:18)
   at Module._compile (node:internal/modules/cjs/loader:1101:14)

I'm unsure of what might be causing this issue, as I have already attempted updating dependencies without success. Any suggestions on potential solutions?

typescript

Answer №1

It appears that the issue you are experiencing may be due to utilizing an outdated version of node. To verify your current version, run the command node --version. If your version is 16 or below, consider upgrading to a newer node version as the most recent requirement for the create-t3-app node engine is:

"engines": {
    "node": ">=18.17.0"
},

Answer №2

In agreement with @radu tarean, the issue seemed to stem from my outdated node version.

After executing sudo n latest, the output showed:

copying : node/21.2.0
   installed : v21.2.0 to /usr/local/bin/node
      active : v16.11.1 at /Users/mm/.asdf/installs/nodejs/16.11.1/bin/node

Highlighting that the newest version was not activated on my device

Follow these steps for resolution:

  1. Use asdf list nodejs to view all available node versions
  2. Subsequently, employ 
    asdf global nodejs <node_version>
    to set it as the active version

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

Is TypeScript failing to enforce generic constraints?

There is an interface defined as: export default interface Cacheable { } and then another one that extends it: import Cacheable from "./cacheable.js"; export default interface Coin extends Cacheable{ id: string; // bitcoin symbol: stri ...

typescript

Unable to see Next.js page in the browser window

I have set up a next.js project with App Router and my file structure under the app folder looks like this: *some other files* . . user | [id] | | page.tsx | @users | | page.tsx | layout.tsx | page.tsx I am ...

reactjstypescriptnext.jsroutes

Maintain the active tab selection in Angular 2 even after the page reloads

<nav class="nav-sidebar"> <ul class="nav tabs" id="myTab"> <li class="active" ><a href="#tab3" data-toggle="tab" >Tabl 1</a> </li> <li class="tab2"><a href="#tab2" ...

angulartypescript

What is the method for implementing an Inset FAB with Material UI in a React project?

Currently, I am working on a project that requires an "Inset Fab" button to be placed between containers. After referencing the Material Design documentation, I discovered that the component is officially named "Inset FAB". While I was able to find some tu ...

javascriptreactjstypescriptmaterial-uinext.js

Tips for running batch files prior to debugging in VS Code

Currently, I am working on a project using Typescript, nodeJS, and VS Code. When it comes to debugging in VS Code, I have set up configurations in my launch.json file. { "type": "node", "request": "launch", "name": "La ...

typescriptdebuggingnpmvisual-studio-code

In the process of using SWRInfinite for React Infinite Scrolling, the initial call may be made

Can someone help me understand why my useGetItems hook, which imports the usePagination hook, keeps repeating the first call history every time I scroll? /items?_page=1&_limit=40 /items?_page=1&_limit=40 /items?_page=2&_limit=40 /items?_page=1 ...

typescriptnext.jsswrreact-infinite-scroll-component

The variable 'HttpEvent<name[]>' cannot be assigned to the variable 'name[]' because their types are not compatible

This is the code I have written: export interface act { id: number; name: string; } public list!: act[]; getAll(token:any): void{ this.http.get<act[]>('http://localhost:4200/test', token) .subscribe( (val) => this. ...

angulartypescriptangular-httpclient

What is the process for changing a field in a document on firestore?

Is there a way to modify a specific field in a firestore document without retrieving the entire document beforehand? ...

typescriptfirebasegoogle-cloud-firestore

Using Generators with the for...of loop in Typescript

I am currently facing an issue with Typescript when trying to compile a generator-loop that works perfectly in a modern browser. The code snippet in question is: /** Should print "x= 1 y= 2" **/ function* gen() { yield [1, 2] } for (const [x, y] of gen()) ...

typescriptecmascript-6

Checking for GitHub API connectivity issues with GitHub can be done by verifying whether the GitHub API is

Is there a way to check from the GitHub API if it is unable to connect to GitHub or if the internet is not connected? When initializing the API like this: GitHubApi = require("github"); github = new GitHubApi({ version: "3.0.0" ...

node.jsgithubtypescriptgithub-api

Generics in Classes: Unintelligible Error

For a demonstration, you can check out the implementation in this codesanbox. The class "Operation.ts" contains all the details. The purpose of the "Operation" class is to manage operations performed on objects such as rectangles. Each operation type ("mo ...

typescript

I encountered an eslint error when I was trying to configure Vue 3 + Quasar with a Firebase config.ts file. The error stated that there was an unsafe assignment of an `

Recently, I set up a new Vue 3 project with Quasar using the Quasar CLI. In order to store my firebase configuration, I created a new file called src/firebase/config.ts, which looks like this: // Import necessary functions from SDKs import { initializeApp ...

typescriptvue.jsquasar-frameworktypescript-eslint

Are you delving into the realm of reduce functions in order to grasp the intric

Currently following this particular tutorial where they utilize the reduce method to transform an Array<Student> into a { [key: string]: Array<string | number> }. The tutorial includes this expression that caught my attention. It's quite n ...

javascriptnode.jsangulartypescript

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

I'm currently working on creating a simple countdown component for my app but I keep encountering an error when I try to run it using ng serve. I would really appreciate some assistance as I am stuck. app.module.ts import { BrowserModule } from &apo ...

javascriptangulartypescript

I'm having issues with the functionality of my code inside the ng-template and ngIf. What could be

I am facing an issue with my method that is supposed to display the specified HTML content. However, it seems like the ngIf condition within the code block is not functioning correctly. Can someone help me understand why the ngIf statement is being ignored ...

javascriptangulartypescriptangular-ng-if

Stop const expressions from being widened by type annotation

Is there a way to maintain a constant literal expression (with const assertion) while still enforcing type checking against a specific type to prevent missing or excess properties? In simpler terms, how can the type annotation be prevented from overriding ...

javascripttypescript

Empty array being returned by Mongoose after calling the populate() function

I've been struggling for the past 3-4 hours, banging my head against the wall and scouring countless articles here on StackOverflow, but I just can't seem to get my response to populate an array correctly. I'm working with Express.js, Typesc ...

typescriptmongodbexpressmongoosemongoose-populate

Angular 5.2: Component type does not contain the specified property

In my Formbuilder.Group method, I have included the properties as shown in the following TypeScript code: this.form = this.fb.group({ caseNumber: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50), Val ...

jqueryangulartypescript.net-coreangular5

How can I properly specify the type of a function for a complex object with index signatures in TypeScript?

Problem with Retrieving Specific Data from Mixed Object I'm encountering an issue with a function that is supposed to retrieve a specific piece of data within an object. The object contains a combination of known indexes and index signatures, which s ...

typescripttypescript-typingstypescript-generics

Angular2: The provided arguments do not correspond to any valid call signature

I have developed my own Observable service implementation import { Injectable, EventEmitter, Output} from '@angular/core'; @Injectable() export class CustomObservableService { data = []; @Output eventEmitter:EventEmitter = new EventEmit ...

angulartypescriptcompiler-errorsobservable