Support extending multiple tsconfigs in tsconfig, typescript 5.0

[JeremyMoeglich]

Describe the bug

In your tsconfig you were previously only allowed to extend a single file, typescript 5.0 now allows you to specify an array, throwing the following error:
TypeError [PLUGIN_ERROR]: The "path" argument must be of type string. Received an instance of Array

Reproduction

https://stackblitz.com/edit/vitejs-vite-fyk9mt?file=config1.json,tsconfig.json&terminal=dev

Steps to reproduce

Open reproduction OR Use any vite + typescript project, specify an array as the extends option in the tsconfig

npm run build

System Info

System:
    OS: Linux 6.2 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
    Memory: 22.40 GB / 31.27 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 19.7.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
  Browsers:
    Firefox: 110.0.1

Used Package Manager

npm

Logs

❯ vite build --debug
vite:config no config file found. +0ms
vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-9zfaps) +0ms
vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-9zfaps) +1ms
vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-9zfaps) +1ms
vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-9zfaps) +0ms
vite:esbuild init tsconfck end +1ms
vite:esbuild init tsconfck end +0ms
vite:esbuild init tsconfck end +1ms
vite:esbuild init tsconfck end +0ms
vite:config using resolved config: {
vite:config root: '/home/projects/vitejs-vite-9zfaps',
vite:config base: '/',
vite:config mode: 'production',
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: {
vite:config disabled: 'build',
vite:config force: undefined,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config sourcemap: false,
vite:config rollupOptions: {},
vite:config minify: 'esbuild',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: 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 modulePreload: { polyfill: true }
vite:config },
vite:config configFileDependencies: [],
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 optimizeDeps: { force: undefined },
vite:config build: {}
vite:config },
vite:config rawBase: '/',
vite:config resolve: {
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config browserField: true,
vite:config conditions: [],
vite:config extensions: [
vite:config '.mjs', '.js',
vite:config '.mts', '.ts',
vite:config '.jsx', '.tsx',
vite:config '.json'
vite:config ],
vite:config dedupe: [],
vite:config preserveSymlinks: false,
vite:config alias: [ [Object], [Object] ]
vite:config },
vite:config publicDir: '/home/projects/vitejs-vite-9zfaps/public',
vite:config cacheDir: '/home/projects/vitejs-vite-9zfaps/node_modules/.vite',
vite:config command: 'build',
vite:config ssr: {
vite:config format: 'esm',
vite:config target: 'node',
vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] }
vite:config },
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config isProduction: true,
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'vite:watch-package-data',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config server: {
vite:config preTransformRequests: true,
vite:config sourcemapIgnoreList: [Function (anonymous)],
vite:config middlewareMode: false,
vite:config fs: { strict: true, allow: [Array], deny: [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: 'production', DEV: false, PROD: true },
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) { set: [Function (anonymous)] },
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'vite:watch-package-data',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:load-fallback'
vite:config ],
vite:config rollupOptions: {},
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config } +10ms
vite v4.2.0-beta.1 building for production...
✓ 2 modules transformed.
✓ built in 98ms
[vite:esbuild] The "path" argument must be of type string. Received an instance of Array
file: /home/projects/vitejs-vite-9zfaps/main.ts
error during build:
TypeError [PLUGIN_ERROR]: The "path" argument must be of type string. Received an instance of Array
at get (https://vitejsvite9zfaps-pyfb.w-corp.staticblitz.com/blitz.9bdac2de468a4854f7bacb85c771c93d5676829b.js:6:292489)
at (file:///home/projects/vitejs-vite-9zfaps/node_modules/vite/dist/node/cli.js:840:113)
at ()

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 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-fyk9mt (Open reproduction)

[fi3ework]

The reproduction links seem not to work, I made a new one with the suggested reproduce steps: https://stackblitz.com/edit/vitejs-vite-fyk9mt?file=config1.json,tsconfig.json&terminal=dev.
Vite's leveraging tsconfck to load tsconfig which will support this feature. There's already one issue that tracks this issue. dominikg/tsconfck#67.

[JeremyMoeglich]

Switched out the reproduction link

[dominikg]

tsconfck 2.1.0-next.0 has been released and supports the extends as array syntax already, however vite bundles tsconfck so users can't update it themselves.
It is going to be updated by vite in a future release.

[dominikg]

@JeremyMoeglich vite@4.2.0-beta.2 has been released with support for typescript 5 extends array.

the updated reproduction doesn't throw an error anymore https://stackblitz.com/edit/vitejs-vite-dmcw4a?file=config1.json,tsconfig.json&terminal=dev

but it would be great if you could confirm that it works with your original project too.

[JeremyMoeglich]

Vite is working now, other libraries still block usage of 5.0 but Vite isn't one of them anymore

[Remzi1993]

Vite is working now, other libraries still block usage of 5.0 but Vite isn't one of them anymore

I still have a problem and can't get it to work with Typescript 5.0.2

I tried to update but typescript is broken after an upgrade from 4.9.5 to 5.0.2, see: https://github.com/Remzi1993/remzi-info/tree/upgrade-typescript (upgrade-typescript - branch)

[dominikg]

@Remzi1993 this issue is about using the new typescript 5 feature to extend from multiple tsconfig.json files via "extends":["config1.json","config2.json"]

Your problem seems to be upgrading from typescript 4.9.3, which does not have this feature. As such please file a new issue if you have a reproducible problem with vite and typescript 5.0 that did not exist with typescript 4.9.5

for general help, you can also use the vite discord server

[Remzi1993]

@Remzi1993 this issue is about using the new typescript 5 feature to extend from multiple tsconfig.json files via "extends":["config1.json","config2.json"]

Your problem seems to be upgrading from typescript 4.9.3, which does not have this feature. As such please file a new issue if you have a reproducible problem with vite and typescript 5.0 that did not exist with typescript 4.9.5

for general help, you can also use the vite discord server

It seems to me that I have magically fixed the issue by updating TypeScript 4.9.3 to 4.9.5 and then to 5.0.2
Thank you for pointing me out that there was another version in between. Which is also strange because I used npm create vite@latest which means that Vite is using TypeScript 4.9.3 as default right now (Made my website a couple of days ago).

Version 4.9.5 is 2 months old. I think Vite needs to make 4.9.5 the default for the time being and maybe switch to TypeScript 5 later this week when you guys have checked everything.

EDIT: I talked too fast, there is an error:

I will file a bug report

[dominikg]

fyi, the typescript templates in create-vite use "typescript":"^4.9.3" in their package.json eg https://github.com/vitejs/vite/blob/main/packages/create-vite/template-vue-ts/package.json#L16
which is going to install the latest version of typescript 4 at the time of npm install. So either you have been using a custom registry or did something else that caused your package manager to prefer 4.9.3 over 4.9.5.

There is no bug with create-vite templates regarding typescript version. Updating the default typescript version to 5 is going to happen at some point.

[dominikg]

And also all of this is off topic here, so unless it has to do with multiple extends, please use discord for further communication.

[Remzi1993]

And also all of this is off topic here, so unless it has to do with multiple extends, please use discord for further communication.

I don't think everything is offtopic here🤔 Upgrading to typescript 5.0 is a massive showstopper, you can reproduce the problem with the repo I have given here, but if you say so who am I to argue 🤷

EDIT: My apologies, I thought I was replying to you on issue #12521 (I made a new issue)