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

TS2322 error: What does it mean when the type is both not assignable and assignable?

I've been delving into the world of generics with Java and C#, but TypeScript is throwing me for a loop. Can someone shed some light on this confusion? constructor FooAdapter(): FooAdapter Type 'FooAdapter' is not assignable to type 'A ...

typescriptgenerics

What is the best way to treat each TS file as its own independent module?

Just starting out in the world of TS and feeling like a newbie. I've noticed that in Dart, each file in a directory can run independently and you have to explicitly import objects from other files if needed. For example: file1.dart int myFunc() => ...

typescriptmodule

Customizing number input types in Angular 2 - the perfect solution

Attempting to incorporate a time picker using HTML5 input type number in Angular2. The code snippet below illustrates the setup: <input type="number" [(ngModel)]="hour" (change)="checkHours();" name="one" min="1" max="12"> <input type="number" ...

angularhtmltypescriptangular5

Developing an exportable value service type in TypeScript for AngularJS

I have been working on creating a valuable service using typescript that involves a basic switch case statement based on values from the collection provided below [{ book_id: 1, year_published: 2000 }, { book_id: 2, year_publish ...

angularjstypescript

What is the best way to test chained function calls using sinon?

Here is the code I am currently testing: obj.getTimeSent().getTime(); In this snippet, obj.getTimeSent() returns a Date object, followed by calling the getTime() method on that Date. My attempt to stub this functionality looked like this: const timeStu ...

javascriptunit-testingtypescriptsinon

Adding the unzip feature is not within my capabilities

I am a novice Japanese web developer. Unfortunately, my English skills are not great. I apologize for any inconvenience. I am interested in utilizing this specific module: https://www.npmjs.com/package/unzip To do so, I executed the following commands ...

javascripttypescriptyarnpkg

What is the best way to modify the disabled attribute?

After disabling a button using a boolean variable, updating the variable does not remove the disabled attribute. How can I update my code to enable the button when the variable changes? Here is my current code snippet: var isDisabled = true; return ( ...

reactjstypescriptnext.js

Is there a way to verify within the "if" statement without repeating the code?

Is there a way in javascript (or typescript) to prevent redundant object rewriting within an if statement condition? For example: if (A != null || A != B) { // do something here } // can it be done like this: if (A != null || != B) { // avoid repeating ...

javascripttypescriptif-statement

The Angular service retrieves only the default values

I'm currently following an Angular tutorial and encountering some issues. Problem #1: The problem arises when using two services, recipe.service.ts (handles local data manipulation) and data-storage.service.ts (stores data in Firebase). When the getR ...

angulartypescript

Using Datatable.net with Angular 6 for Change Monitoring

I've been encountering several issues with the custom datatable component that I created. One specific problem is that when I delete a row from my datatable, not only does the row disappear, but also the pagination functionality and other features st ...

angulartypescriptdatatablesangular6

Is it possible to use null and Infinity interchangeably in JavaScript?

I've declared a default options object with a max set to Infinity: let RANGE_DEFAULT_OPTIONS: any = { min: 0, max: Infinity }; console.log(RANGE_DEFAULT_OPTIONS); // {min: 0, max: null} Surprisingly, when the RANGE_DEFAULT_OPTIONS object is logged, i ...

javascripttypescript

Can someone guide me on creating a slideshow using Ionic?

Having trouble integrating a javascript/css slideshow into Ionic. Ionic does not support the use of ".style" in elements. Need assistance, below is the code: <head> <title>Slideshow</title> <style> .slides {display:none;} </styl ...

angulartypescriptionic-frameworkionic4

Trouble Integrating svgr/webpack with Webpack 5 and SingleSpa

I've been grappling with this issue for the past week. Despite scouring through numerous Stack Overflow threads and reading the SVGR/WEBPACK documentation, I haven't been able to find a solution. I decided to upgrade an old React single-spa appl ...

reactjstypescriptwebpacksingle-spasingle-spa-react

What is the process of encapsulating a callback function within another callback function and invoking it from there?

Here is the code snippet I am working with: var me = this; gapi.auth.authorize({ client_id: client, scope: scope, immediate: true }, function (authResult: any) { if (authResult && !authResult.error) { me ...

javascriptcallbacktypescript

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

htmlangulartypescript

Utilize VueJS to upload and visualize a file input on your website

I am currently working with TypeScript and Haml in conjunction with vue.js. My goal is to enable users to upload and view a file seamlessly using the vue.js framework. I have successfully managed to upload an image, however, I am facing an issue where the ...

javascripttypescripthamlvue.js

Selecting a filter for an array of objects

I'm struggling to implement a search feature in my mat-select DropDown. The existing options I've found online aren't quite working for me due to the object array I am passing to the Dropdown. Any assistance or guidance on this matter would ...

htmlangulartypescript

Fixing the forwardRef issue with react-router-dom and material-ui

Despite implementing the forwardRef as recommended in various posts and Material-UI website examples, I am still encountering a warning in the console that has me puzzled. I am working on setting up a drawer with a list of items that are React Router link ...

reactjstypescriptreact-routermaterial-uireact-forwardref

Directive for Angular 2: Expand Further

Looking to create a custom readmore directive in Angular2 that will collapse and expand long blocks of text based on a specified max height, rather than character count. The directive will include "Read more" and "Close" links. <div read-more [maxHeigh ...

angulartypescriptangular2-templateangular2-directives

The formBuilder validator pattern seems to be malfunctioning

I am attempting to display a message when the password does not meet the formGroup pattern. Here is how my FormGroup is initialized: this.signupForm = fb.group({ userName: ['', Validators.compose([Validators.required,Validators.pattern(/^&bsol ...

angularformsvalidationtypescriptionic2