Skip to content

tsconfig files ignored when importing ts files from sibling directories #7932

@gristow

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions