Remix app with "vite-express" template starting issue (TSConfckParseError: failed to resolve "extends")

Question

I have created a new [email protected] project using remix-run/remix/templates/vite-express by running the command:

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

Then trying to start the app in dev mode I got an error:

[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)
      at Function.resolve (node:internal/modules/helpers:187:19)
      at resolveExtends (file:///Users/username/my-remix-project/node_modules/tsconfck/src/parse.js:239:14)
      at parseExtends (file:///Users/username/my-remix-project/node_modules/tsconfck/src/parse.js:186:24)
      at Module.parse (file:///Users/username/my-remix-project/node_modules/tsconfck/src/parse.js:53:23)
      at async Promise.all (index 78)
      at async configResolved (file:///Users/username/my-remix-project/node_modules/vite-tsconfig-paths/dist/index.mjs:104:9)
      at async Promise.all (index 0)
      at async resolveConfig (file:///Users/username/my-remix-project/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:67857:5)
      at async _createServer (file:///Users/username/my-remix-project/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:64225:20) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/Users/username/.vscode/extensions/ms-vscode-remote.remote-containers-0.338.1/dev-containers-user-cli/test/tsconfig.json'
    ]
  },
  tsconfigFile: '/Users/username/.vscode/extensions/ms-vscode-remote.remote-containers-0.338.1/dev-containers-user-cli/test/tsconfig.json'
}

vite.config.ts is:

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

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

tsconfig.json is

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

Why does vite-tsconfig-paths try to import all tsconfig.json files from /Users/username?

Answer 1

TL;DR;

You can pass root option with path to the folder with tsconfig.json in the vite.config.ts:

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: "./",
    }),
  ],
});

Investigation:

There is an ability to debug vite-tsconfig-paths using:

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

it showed:

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

So I tried to find what are workspace and projects in the vite-tsconfig-paths and found the issues:

• vite-tsconfig-paths - Circular reference between tsconfig files leads to deadlock
• vite - fix(deps): downgrade tsconfck

I tried to pass root option into tsconfigPaths() and it helped me:

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: "./",
    }),
  ],
});

Starting output became:

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