"Internal server error" when `root` option for Vite is used

[winterkind]

Describe the bug

When I set the root option in the Vite configuration and start the dev server, I get the server error failed to transform tagged svelte request for id for several components.

For example:

[vite] Internal server error: failed to transform tagged svelte request for id src/lib/VirtualList.svelte?svelte&type=style&lang.css
  Plugin: vite-plugin-svelte
  File: src/lib/VirtualList.svelte?svelte&type=style&lang.css
      at TransformContext.transform (C:\xxx\vite-project\node_modules\@sveltejs\vite-plugin-svelte\dist\index.cjs:1128:15)
      at Object.transform (C:\xxx\vite-project\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:50923:53)
      at transformRequest (C:\xxx\vite-project\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:66706:51)
      at async viteTransformMiddleware (C:\xxx\vite-project\node_modules\vite\dist\node\chunks\dep-f2b4ca46.js:66844:32)

As far as I remember, this still worked with release next.11. In the demo project below for reproduction, the root option is just a dummy to show the issue. But I have other projects where I need to set the root option. There it blocks me from updating the plug-in.

Reproduction

1. Clone https://gitlab.com/winterkind/vite-project/
2. In vite.config.ts un-comment the root option (// root: "./",)
3. npm start and open index.html in your browser

Logs

vite:config bundled config file loaded in 74ms +0ms
  vite:vite-plugin-svelte default options for development {
  extensions: [ '.svelte' ],
  hot: { injectCss: false },
  emitCss: true,
  compilerOptions: { format: 'esm', css: false, dev: true, hydratable: true }
} +0ms
  vite:vite-plugin-svelte additional vite config {
  optimizeDeps: {
    exclude: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/store',
      'svelte/transition',
      'svelte',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte-hmr'
    ]
  },
  resolve: {
    mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
    dedupe: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/store',
      'svelte/transition',
      'svelte',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte-hmr'
    ]
  }
} +15ms
  vite:vite-plugin-svelte resolved options {
  extensions: [ '.svelte' ],
  hot: { injectCss: false },
  emitCss: true,
  compilerOptions: { format: 'esm', css: false, dev: true, hydratable: true },
  preprocess: [
    {
      defaultLanguages: [Object],
      markup: [AsyncFunction: markup],
      script: [AsyncFunction: script],
      style: [AsyncFunction: style]
    },
    { style: [Function: style] }
  ],
  configFile: 'C:\\xxx\\vite-project\\svelte.config.cjs',
  experimental: {},
  root: './',
  isProduction: false,
  isBuild: false,
  isServe: true
} +10ms
  vite:config using resolved config: {
  vite:config   root: 'C:/xxx/vite/vite-project',
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite-plugin-svelte',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  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:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   optimizeDeps: {
  vite:config     exclude: [
  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-hmr/runtime/hot-api-esm.js',
  vite:config       'svelte-hmr/runtime/proxy-adapter-dom.js',
  vite:config       'svelte-hmr'
  vite:config     ],
  vite:config     esbuildOptions: { keepNames: undefined }
  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/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     mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     alias: [ [Object] ]
  vite:config   },
  vite:config   configFile: 'C:/xxx/vite/vite-project/vite.config.ts',
  vite:config   configFileDependencies: [ '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: { fs: [Object] }
  vite:config   },
  vite:config   base: '/',
  vite:config   publicDir: 'C:\\xxx\\vite-project\\public',
  vite:config   cacheDir: 'C:\\xxx\\vite-project\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  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     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  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     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  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   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +30ms
  vite:deps Crawling dependencies using entries:
  vite:deps   C:/xxx/vite-project/index.html +0ms
  vite:resolve 1ms   /src/main.ts -> C:/xxx/vite-project/src/main.ts +0ms
  vite:resolve 1ms   ./App.svelte -> C:/xxx/vite/vite-project/src/App.svelte +2ms
  vite:resolve 1ms   ./lib/FioriApp.svelte -> C:/xxx/vite-project/src/lib/FioriApp.svelte +3ms
  vite:resolve 1ms   ./lib/Title.svelte -> C:/xxx/vite-project/src/lib/Title.svelte +1ms
  vite:resolve 1ms   ./visualTests/Title.svelte -> C:/xxx/vite/vite-project/src/visualTests/Title.svelte +1ms
  vite:resolve 0ms   ./visualTests/Button.svelte -> C:/xxx/vite/vite-project/src/visualTests/Button.svelte +0ms
  vite:resolve 0ms   ./visualTests/Bar.svelte -> C:/xxx/vite/vite-project/src/visualTests/Bar.svelte +1ms
  vite:resolve 0ms   ./visualTests/Icon.svelte -> C:/xxx/vite/vite-project/src/visualTests/Icon.svelte +1ms
  vite:resolve 0ms   ./visualTests/VirtualList.svelte -> C:/xxx/vite/vite-project/src/visualTests/VirtualList.svelte +1ms
  vite:resolve 3ms   @sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css -> C:/xxx/vite/vite-project/node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css +5ms
  vite:resolve 3ms   ../lib/Title.svelte -> C:/xxx/vite/vite-project/src/lib/Title.svelte +4ms
  vite:resolve 3ms   fundamental-styles/dist/title.css -> C:/xxx/vite/vite-project/node_modules/fundamental-styles/dist/title.css +0ms
  vite:resolve 1ms   ../lib/Bar.svelte -> C:/xxx/vite/vite-project/src/lib/Bar.svelte +2ms
  vite:resolve 1ms   ../lib/Icon.svelte -> C:/xxx/vite/vite-project/src/lib/Icon.svelte +0ms
  vite:resolve 2ms   ../lib/Button.svelte -> C:/xxx/vite/vite-project/src/lib/Button.svelte +1ms
  vite:resolve 1ms   ../lib/VirtualList.svelte -> C:/xxx/vite/vite-project/src/lib/VirtualList.svelte +1ms
  vite:resolve 0ms   ../lib/ListItem.svelte -> C:/xxx/vite/vite-project/src/lib/ListItem.svelte +8ms
  vite:resolve 1ms   fundamental-styles/dist/button.css -> C:/xxx/vite/vite-project/node_modules/fundamental-styles/dist/button.css +18ms
  vite:resolve 1ms   fundamental-styles/dist/icon.css -> C:/xxx/vite/vite-project/node_modules/fundamental-styles/dist/icon.css +0ms
  vite:resolve 0ms   fundamental-styles/dist/bar.css -> C:/xxx/vite/vite-project/node_modules/fundamental-styles/dist/bar.css +1ms
  vite:resolve 0ms   ./Icon.svelte -> C:/xxx/vite/vite-project/src/lib/Icon.svelte +1ms
  vite:resolve 1ms   fundamental-styles/dist/list.css -> C:/xxx/vite/vite-project/node_modules/fundamental-styles/dist/list.css +2ms
  vite:resolve 1ms   ./Button.svelte -> C:/xxx/vite/vite-project/src/lib/Button.svelte +1ms
  vite:deps Scan completed in 144ms: {} +72ms
  vite:deps No dependencies to bundle. Skipping.
  vite:deps 
  vite:deps 
  vite:deps  +0ms

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 11.29 GB / 15.92 GB
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    npm: 7.20.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.71)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @sveltejs/vite-plugin-svelte: * => 1.0.0-next.14
    svelte: ^3.35.0 => 3.40.2
    vite: ^2.1.0 => 2.4.3

Severity

blocking an upgrade

[bluwy]

Can reproduce. Looks like one of the internal path resolver wasn't resolving properly when root is specified. The id should be something like /home/xxx/vite-project/src/lib/VirtualList.svelte?svelte&type=style&lang.css instead of src/lib/VirtualList.svelte?svelte&type=style&lang.css

[dominikg]

Hmm, if this worked before i suspect it happened when code to read root moved from configResolved to config hook.

going to take a closer look now.

Please note that gitlab.com seems to require users to sign in prior to being able to visit/clone https://gitlab.com/winterkind/vite-project/ a reproduction accessible on github (or without requiring an additional login) would be preferred.

ids should be rooted to vite root, so src/lib/VirtualList.svelte?svelte&type=style&lang.css is missing the leading /

[winterkind]

Apologies for the enforced GitLab registration. The project was set to private. I changed that now - a bit too late...

[dominikg]

This is indeed caused by the unresolved root. Fix coming soon, as a workaround you can do

import {normalizePath} from 'vite';
import path from 'path';
...
config: {
...
  root: normalizePath(path.resolve('./'))
}