tsconfig files ignored when importing ts files from sibling directories

[gristow]

Describe the bug

When importing a typescript file from a sibling directory to the vite directory, whether by relative imports or via an alias, neither the tsconfig.json settings of the vite directory nor of the sibling directory are applied.

To reproduce:

• clone the repo: git clone https://github.com/gristow/vite-sibling-tsconfig.git
• run yarn or npm i in the vite subdirectory
• run yarn or npm i in the sibling directory.
• run yarn dev or npm run dev in the vite subdirectory.

In this demonstration, identical files (./vite/src/lib/mobxNonSiblingDemo and ./sibling/src/mobxSiblingDemo) are imported into App.svelte.

The tsconfig compilerOptions.useDefineForClassFields is respected and compiled correctly for the file in the vite/src/lib directory, but not for the one in the sibling/src directory. As a result, it becomes impossible to observe certain properties on mobx stores.

Relevant Files:

vite-sibling-tsconfig (root)
└───vite
│   └──src
│      │- App.svelte
│      │
│      └──lib
│          │- mobxNonSiblingDemo.ts
│   
└───sibling
    └──src
    │  │- mobxSiblingDemo.ts
    │
    │- tsconfig.json        

Reproduction

https://github.com/gristow/vite-sibling-tsconfig

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 11.68 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 100.0
    Safari: 15.3

Used Package Manager

yarn

Logs

npx vite --debug
  vite:config TS + native esm config loaded in 43.29ms URL {
  href: 'file:///sites/vite-sibling-tsconfig/vite/vite.config.ts',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/sites/vite-sibling-tsconfig/vite/vite.config.ts',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:vite-plugin-svelte findSvelteDependencies: searching svelte dependencies in /sites/vite-sibling-tsconfig/vite +0ms
  vite:vite-plugin-svelte adding bare svelte packages to optimizeDeps.include: svelte/animate, svelte/easing, svelte/internal, svelte/motion, svelte/store, svelte/transition, svelte  +1ms
  vite:vite-plugin-svelte automatically excluding found svelte dependencies:  +0ms
  vite:vite-plugin-svelte reincluding transitive dependencies of excluded svelte dependencies [] +0ms
  vite:vite-plugin-svelte additional vite config {
  resolve: {
    mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
    dedupe: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/ssr',
      'svelte/store',
      'svelte/transition',
      'svelte',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte-hmr'
    ]
  },
  optimizeDeps: {
    include: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/store',
      'svelte/transition',
      'svelte'
    ],
    exclude: [ 'svelte-hmr' ]
  },
  ssr: { noExternal: [], external: [] }
} +0ms
  vite:vite-plugin-svelte resolved options {
  hot: { injectCss: false },
  compilerOptions: { css: false, dev: true, format: 'esm' },
  extensions: [ '.svelte' ],
  emitCss: true,
  preprocess: [
    {
      defaultLanguages: [Object],
      markup: [AsyncFunction: markup],
      script: [AsyncFunction: script],
      style: [AsyncFunction: style]
    },
    { style: [Function: style] }
  ],
  configFile: '/sites/vite-sibling-tsconfig/vite/svelte.config.js',
  experimental: {},
  root: '/sites/vite-sibling-tsconfig/vite',
  isBuild: false,
  isServe: true,
  isDebug: true,
  isProduction: false
} +3ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite-plugin-svelte',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:optimized-deps',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   resolve: {
  vite:config     dedupe: [
  vite:config       'svelte/animate',
  vite:config       'svelte/easing',
  vite:config       'svelte/internal',
  vite:config       'svelte/motion',
  vite:config       'svelte/ssr',
  vite:config       'svelte/store',
  vite:config       'svelte/transition',
  vite:config       'svelte',
  vite:config       'svelte-hmr/runtime/hot-api-esm.js',
  vite:config       'svelte-hmr/runtime/proxy-adapter-dom.js',
  vite:config       'svelte-hmr'
  vite:config     ],
  vite:config     alias: [ [Object], [Object], [Object] ],
  vite:config     mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ]
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     include: [
  vite:config       'svelte/animate',
  vite:config       'svelte/easing',
  vite:config       'svelte/internal',
  vite:config       'svelte/motion',
  vite:config       'svelte/store',
  vite:config       'svelte/transition',
  vite:config       'svelte'
  vite:config     ],
  vite:config     exclude: [ 'svelte-hmr' ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   ssr: { noExternal: [], external: [] },
  vite:config   configFile: '/sites/vite-sibling-tsconfig/vite/vite.config.ts',
  vite:config   configFileDependencies: [ '/sites/vite-sibling-tsconfig/vite/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/sites/vite-sibling-tsconfig/vite',
  vite:config   base: '/',
  vite:config   publicDir: '/sites/vite-sibling-tsconfig/vite/public',
  vite:config   cacheDir: '/sites/vite-sibling-tsconfig/vite/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isWorker: false,
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +11ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms
Port 3000 is in use, trying another one...

  vite v2.9.6 dev server running at:

  > Local: http://localhost:3001/
  > Network: use `--host` to expose

  ready in 112ms.

  vite:resolve 2.48ms /service-worker.js -> null +0ms
  vite:spa-fallback Not rewriting GET /service-worker.js because the path includes a dot (.) character. +0ms
  vite:time 10.28ms /service-worker.js +0ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

Vite uses tsconfck to match the tsconfig for a TS file. This code is where we pre-search for all tsconfig.json that would be matched for a TS file:

vite/packages/vite/src/node/plugins/esbuild.ts

Lines 285 to 294 in 7f535ac

	async function initTSConfck(config: ResolvedConfig) {
	tsconfckParseOptions.cache!.clear()
	const workspaceRoot = searchForWorkspaceRoot(config.root)
	tsconfckParseOptions.root = workspaceRoot
	tsconfckParseOptions.tsConfigPaths = new Set([
	...(await findAll(workspaceRoot, {
	skip: (dir) => dir === 'node_modules' || dir === '.git'
	}))
	])
	}

My guess is that since we only search from the root (which in this case the vite folder), in doesn't find the tsconfig.json in the sibling folder. Maybe a change in tsconfck is needed when a TS file is outside of the root, it would fallback to manual crawling again 🤔

cc @dominikg

[sapphi-red]

I suppose adding package.json with a content below to vite-sibling-tsconfig (root) will work for a workaround. (not tested)

{ "workspaces": [] }

[gristow]

@sapphi-red -- brilliant, yes, that fixes it for our use case!

[dominikg]

I mentioned the possibility of this happening in the PR that introduced it #7055

The suggestion to turn your setup into a monorepo/workspace is the correct one in my opinion.

I'm not sure if importing source files from outside a workspace root should be a supported feature of vite.
Even when tsconfck resolves the right tsconfig file, the dev server would likely complain about the import when server.fs.strict is true unless you add a custom entry to the allow list.

If vite wants to support this @bluwy suggestion to fall back to crawling for out of root files in tsconfck can be added.

[patak-dev]

I would prefer to avoid adding more complexity. Maybe we could close this as there is an easy workaround. If later we see that more users are having issues we could also add a tip in the docs.