search

vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.52k stars 6.19k forks source link

Changing vite.config.ts 'root' option break Typescript and Sass #14200

Closed Trystan-SA closed 1 year ago

Trystan-SA commented 1 year ago

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

You can test the behavior from the file Counter.svelte inside the lib folder.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
    Memory: 19.22 GB / 31.79 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.4.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.12 - C:\Program Files\nodejs\pnpm.CMD
  npmPackages:
    vite: ^4.4.5 => 4.4.9

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.

  • Githubissues is a development platform for aggregating issues.