Encountering a problem when launching the "vite-express" template on the Remix app (TSConfckParseError: error resolving "extends")

I recently launched a brand-new [email protected] project using the 

remix-run/remix/templates/vite-express
template after executing this command:

npx create-remix@latest --template remix-run/remix/templates/vite-express

However, upon trying to run the app in dev mode, I encountered an error message:

[tsconfig-paths] An error occurred while parsing "/Users/username/.vscode/extensions/ms-vscode-remote.remote-containers-0.338.1/dev-containers-user-cli/test/tsconfig.json". See below for details.
TSConfckParseError: failed to resolve "extends":"../../tsconfig.base.json" in /Users/username/.vscode/extensions/ms-vscode-remote.remote-containers-0.338.1/dev-containers-user-cli/test/tsconfig.json
    at resolveExtends (file:///Users/username/my-remix-project/node_modules/tsconfck/src/parse.js:251:8)
    at parseExtends (file:///Users/username/my-remix-project/node_modules/tsconfck/src/parse.js:186:24)
    ... 5 lines matching cause stack trace ...
    at async _createServer (file:///Users/username/my-remix-project/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:64225:20)
    at async file:///Users/username/my-remix-project/server.js:12:7 {
  code: 'EXTENDS_RESOLVE',
  cause: Error: Cannot find module '../../tsconfig.base.json'
  Require stack:
  - /Users/username/.vscode/extensions/ms-vscode-remote.remote-containers-0.338.1/dev-containers-user-cli/test/tsconfig.json
      at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)

// More stack trace information

The content of vite.config.ts is as follows:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
});

This is the structure of my tsconfig.json file:

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],

// Remaining content of tsconfig.json file

I am puzzled as to why vite-tsconfig-paths attempts to import all tsconfig.json files located in /Users/username. Any insights on this issue?

typescriptviteremix.runvite-tsconfig-paths

Answer №1

In Summary:

To specify the root folder containing the tsconfig.json file in your vite.config.ts, simply pass the root option:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix(),
    tsconfigPaths({
      root: "./",
    }),
  ],
});

Analysis:

If you need to debug vite-tsconfig-paths, run the following command:

DEBUG='vite-tsconfig-paths' node ./server.js

The output revealed:

vite-tsconfig-paths options.root   == undefined +0ms
vite-tsconfig-paths project root   == /Users/username/dev/my-remix-project +0ms
vite-tsconfig-paths workspace root == /Users/username +0ms
vite-tsconfig-paths options.root   == undefined +6s
vite-tsconfig-paths project root   == /Users/username/dev/my-remix-project +2ms
vite-tsconfig-paths workspace root == /Users/username +0ms
vite-tsconfig-paths projects: [
  // all tsconfig files, found in /Users/username/**
] +5s

Further investigation into vite-tsconfig-paths uncovered some issues related to circular references and dependency downgrades:

By specifying the root option in the tsconfigPaths(), the issue was resolved:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix(),
    tsconfigPaths({
      root: "./",
    }),
  ],
});

The updated output indicated:

vite-tsconfig-paths options.root   == /Users/username/my-remix-project +0ms
vite-tsconfig-paths project root   == /Users/username/my-remix-project +1ms
vite-tsconfig-paths workspace root == undefined +0ms
vite-tsconfig-paths projects: [ '/Users/username/my-remix-project/tsconfig.json' ] +7ms

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

The NgModel function within *ngFor is executing more times than necessary during initialization

Displayed on screen are a list of tutorials with check boxes next to each tutorial's states. These tutorials and states are pulled from the database, each tutorial containing a name and an array of associated states. Here is the HTML code: <div c ...

htmlangulartypescriptloopsangular-material

What is preventing the value from changing in auth.guard?

I am encountering an issue with the variable loggined, which I modify using the logTog() method. When I call this method, a request is made to a service where the current result is passed to auth.guard. However, in the console, it displays "undefined". Can ...

javascriptangulartypescriptauthenticationguard

Utilize the class or interface method's data type

In the context of a child component calling a callback provided by its parent, this situation is commonly seen in AngularJS. As I am utilizing TypeScript, I aim to implement strong typing for the callback in the child component. Here is the initial stat ...

angularjstypescript

Utilizing GroupBy in RxJs for an Observable of Objects数组

I am working with entries of type Observable<Event[]>, and they are structured as follows: [{ "_id": 1, "_title": "Test Event 1", "_startDate": "2019-05-29T07:20:00.000Z", "_endDate": "2019-05-29T08:00:00.000Z", "_isAllDay": false }, ...

javascripttypescriptrxjsobservable

Dynamic rows in an Angular 2 Material data table

I'm currently working on dynamically adding rows to an Angular 2 Data Table ( https://material.angular.io/components/table/overview) by utilizing a service called "ListService". This service provides me with the columns ("meta.attributes") to be displ ...

javascripthtmlangulartypescript

Issue with bi-directional data binding in Angular's matInput component

When working on my template... <input matInput placeholder="Amount" [(value)]="amount"> In the corresponding component... class ExampleComponent implements OnInit { amount: number = 0; ... } The binding doesn't seem to work as expect ...

angulartypescript

Can the detectChanges() method in Angular cause any issues when used with the form control's valueChanges event?

Within my parent Component, I am working with a formGroup and updating its value using patchValue method. ngAfterViewInit() { this.sampleform.controls['a'].patchValue ...} I then pass this form to a child component in the parent component's ...

angulartypescript

Issues with Formik sign-up

Working on a study project involving React, Typescript, Formik, and Firebase presents a challenge as the code is not functioning correctly. While authentication works well with user creation in Firebase, issues exist with redirection, form clearing, and da ...

javascriptreactjstypescriptfirebaseformik

My component is failing to render because of a type mismatch error (StaticImageData does not equal String)

Beginner in Nextjs and React seeking help. I have created an <ImageSlider /> component for my Nextjs website, but it is not rendering on the home page due to a type mismatch. Nextjs requires StaticImageData, but is getting a URL string instead. It& ...

reactjsnext.jsvitenext-images

Can a Typescript type alias be altered in real time?

Currently, I am developing an Angular library that will function as an API client. The challenge I am facing is that some of the applications utilizing this library are configured with an HttpInterceptor to automatically transform date strings into JavaScr ...

angulartypescripttype-narrowing

Next js is throwing an error because it cannot accept objects as a React child. Instead, it found an error message stating "Response not successful: Received status code 401."

This app showcases Github issues by utilizing the graphql API. After finishing the app, I encountered an error without making any changes. The technologies used for this project include Next.js, Typescript, Material UI, Tailwind CSS, and GraphQL. https: ...

reactjstypescriptgraphqlnext.js

Inject props into a Component nested within a Higher-Order-Component (HOC)

In attempting to grasp the concept of creating a React Higher Order Component from this particular article, I find myself struggling to fully understand and utilize this HOC. interface PopupOnHoverPropType { hoverDisplay: string; } const WithPopupOnHov ...

javascriptreactjstypescripthigher-order-functionshigher-order-components

The program is requesting an expression involving the user's username

https://i.stack.imgur.com/tf1QD.png What is causing the issue with trying to use user.username? as an expression? While user.username returns a string of the User's username, I am unable to index it into listOfPlayers[]. client.on("messageReacti ...

typescriptdiscord.js

Issue with react router v6: Component fails to render even though route has been changed

The router seems to be experiencing an issue where it does not render a component. Specifically, on the home page, the Private Route is only rendered once. Clicking on a NavLink changes the URL to "/agreements", but the component itself is not being render ...

reactjstypescriptreact-routerreact-router-dom

Trying to enter the function, but it exits without executing

I'm facing an issue with my function that involves making multiple calls to an observer. I need the function to wait until all the calls are complete before returning. I attempted putting the return statement inside the subscribe method, but it result ...

angulartypescriptobservable

Refresh Information Stripe

I'm currently working on implementing Stripe, and utilizing metadata in the process. Everything works smoothly until I come across a scenario where I need to update a value in the metadata to determine if a specific uuid has been used before. pay ...

typescriptstripe-payments

Entering the appropriate value into an object's property accurately

I am currently facing an issue with typing the value needed to be inserted into an object's property. Please refer below. interface SliceStateType { TrptLimit: number; TrptOffset: number; someString: string; someBool:boolean; } inter ...

typescripttyping

The value of type 'X' cannot be assigned to type 'Y' or 'undefined'

In my code, there is a component that requires a prop with an enum value: export enum AType { some = "SOME", word = "WORD", } const MyComponent = (arg: AType) => {} When I try calling this component like so: <MyComponent ar ...

javascriptreactjstypescript

What is the significance of having nodejs installed in order to run typescript?

What is the reason behind needing Node.js installed before installing TypeScript if we transpile typescript into JavaScript using tsc and run our code in the browser, not locally? ...

javascriptnode.jstypescriptangularnpm

Switching from callback to function in TypeScript

Currently, I am utilizing the mongodb driver to establish a connection with mongo: public listUsers(filterSurname?:string):any { if (this.connected) { debug.log(this.db); var results; this.db.collection(' ...

mongodbtypescript