When specifying the root option in vite.config.ts. It breaks Typescript and Sass/Scss code. It seems that code beginning with <script lang="ts"> get treated like javascript code instead. The same behavior occurs when using Scss, vite seems to use it as CSS code only and raise an error when Scss features are used.
Describe the bug
When specifying the root option in vite.config.ts. It breaks Typescript and Sass/Scss code. It seems that code beginning with
<script lang="ts">
get treated like javascript code instead. The same behavior occurs when using Scss, vite seems to use it as CSS code only and raise an error when Scss features are used.Reproduction
https://github.com/Trystan-SA/RootIssueVite
Steps to reproduce
npm install
npm run dev
You can test the behavior from the file
Counter.svelte
inside thelib
folder.System Info
Used Package Manager
npm
Logs
vite:config bundled config file loaded in 519.43ms +0ms vite:vite-plugin-svelte no svelte config found at E:/Projects/RootIssueVite/src +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, svelte/internal/disclose-version +1ms vite:vite-plugin-svelte extra config for dependencies generated by vitefu { optimizeDeps: { include: [], exclude: [] }, ssr: { noExternal: [], external: [] } } +3ms vite:vite-plugin-svelte post-processed extra config for dependencies { optimizeDeps: { include: [], exclude: [] }, ssr: { noExternal: [], external: [] } } +2ms vite:vite-plugin-svelte enabling "experimental.hmrPartialAccept" in vite config +1ms vite:vite-plugin-svelte additional vite config { resolve: { dedupe: [ 'svelte/animate', 'svelte/easing', 'svelte/internal', 'svelte/motion', 'svelte/ssr', 'svelte/store', 'svelte/transition', 'svelte', 'svelte/internal/disclose-version', 'svelte-hmr/runtime/hot-api-esm.js', 'svelte-hmr/runtime/proxy-adapter-dom.js', 'svelte-hmr' ], conditions: [ 'svelte' ] }, optimizeDeps: { include: [ 'svelte/animate', 'svelte/easing', 'svelte/internal', 'svelte/motion', 'svelte/store', 'svelte/transition', 'svelte', 'svelte/internal/disclose-version' ], exclude: [ 'svelte-hmr' ] }, ssr: { external: [], noExternal: [ 'svelte', /^svelte\// ] }, experimental: { hmrPartialAccept: true } } +0ms vite:vite-plugin-svelte resolved options { hot: false, compilerOptions: { css: 'external', dev: false }, extensions: [ '.svelte' ], emitCss: true, prebundleSvelteLibraries: false, root: 'E:/Projects/RootIssueVite/src', isBuild: true, isServe: false, isDebug: true, isProduction: true, stats: VitePluginSvelteStats {} } +27ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', 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: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 '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 root: 'E:/Projects/RootIssueVite/src', vite:config optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, 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 'svelte/internal/disclose-version' vite:config ], vite:config exclude: [ 'svelte-hmr' ], 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 cssMinify: true vite:config }, vite:config resolve: { vite:config mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ], vite:config browserField: true, vite:config conditions: [ 'svelte' ], 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 '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/internal/disclose-version', 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 preserveSymlinks: false, vite:config alias: [ [Object], [Object] ] vite:config }, vite:config ssr: { vite:config format: 'esm', vite:config target: 'node', vite:config external: [], vite:config noExternal: [ 'svelte', /^svelte\// ], vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: true }, vite:config configFile: 'E:/Projects/RootIssueVite/vite.config.ts', vite:config configFileDependencies: [ 'E:/Projects/RootIssueVite/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 optimizeDeps: { force: undefined }, vite:config build: {} vite:config }, vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: 'E:\Projects\RootIssueVite\src\public', vite:config cacheDir: 'E:/Projects/RootIssueVite/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config css: undefined, vite:config esbuild: { jsxDev: false }, vite:config server: { vite:config preTransformRequests: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules], 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 envDir: 'E:/Projects/RootIssueVite/src', 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(2) { vite:config 'fnpd_E:/Projects/RootIssueVite' => { vite:config dir: 'E:\Projects\RootIssueVite', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config 'fnpd_E:/Projects/RootIssueVite/src' => { vite:config dir: 'E:\Projects\RootIssueVite', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', 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 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:worker-post', 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 getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +37ms vite v4.4.9 building for production... vite:esbuild 39.73ms tsconfck init E:/Projects/RootIssueVite +0ms transforming (1) index.html vite:vite-plugin-svelte transform returns compiled js for E:/Projects/RootIssueVite/src/App.svelte +139ms vite:vite-plugin-svelte resolveId resolved virtual css module E:/Projects/RootIssueVite/src/App.svelte?svelte&type=style&lang.css +7ms vite:vite-plugin-svelte load returns css for E:/Projects/RootIssueVite/src/App.svelte +3ms ✓ 8 modules transformed. vite:vite-plugin-svelte:stats dom compile done. vite:vite-plugin-svelte:stats package files time avg vite:vite-plugin-svelte:stats vite-project 1 50.9ms 50.9ms +0ms ✓ built in 205ms [vite-plugin-svelte] E:/Projects/RootIssueVite/src/lib/Counter.svelte:2:11 Unexpected token file: E:/Projects/RootIssueVite/src/lib/Counter.svelte:2:11 1 | Githubissues.