search

sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
865 stars 105 forks source link

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

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 URL

https://github.com/Trystan-SA/RootIssueVite

Reproduction

npm install npm run dev You can test the behavior from the file Counter.svelte inside the lib folder.

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 | <script lang="ts">
2 | let count: number = 0 //<-- Typescript directives result in an error. Remove ": number"
^
3 | const increment = () => {
4 | count += 1
error during build:
ParseError: Unexpected token
at error (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/utils/error.js:56:16)
at Parser.error (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/parse/index.js:143:3)
at Parser.acorn_error (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/parse/index.js:130:8)
at Object.read_script [as read] (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/parse/read/script.js:50:10)
at tag (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/parse/state/tag.js:203:27)
at new Parser (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/parse/index.js:91:12)
at parse (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/parse/index.js:268:17)
at compile (file:///E:/Projects/RootIssueVite/node_modules/svelte/src/compiler/compile/index.js:136:14)
at compileSvelte (file:///E:/Projects/RootIssueVite/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:126:20)
at async Object.transform (file:///E:/Projects/RootIssueVite/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:220:20)

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
dominikg commented 1 year ago

by default, vite-plugin-svelte searches for svelte.config inside vite root. You can change that by passing the path to svelte.config.js into it https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#config-file-resolving

// vite.config.ts
export default defineConfig({
  root: 'src',
  plugins: [
    svelte({
      configFile: '../svelte.config.js'
    })
  ]
});
dominikg commented 1 year ago

this is also logged at the very beginning.

vite:vite-plugin-svelte no svelte config found at E:/Projects/RootIssueVite/src +0ms