Compilation issues when using different root directory

[canelhasmateus]

Description

When using typescript and specifying a different root directory via vite.config.js , compilation issues arise .

Reproduction

1 - In the provided zip, start the server, which behaves as expected. I'm running the command yarn run dev

2 - Move the index.html inside another directory, changing the root directory inside vite.config.js accordingly -> At this point, the server starts up and displays only plain html, which is to be expected, since it couldn't find the script.

3 - Update the 'src' property inside the index to correctly point to the main.ts module. At this point, i'm getting a unexpected token exception. Its interesting to note that the server does starts, and the error occurs only when accessing the url.

Additional Information

Initially, i thought it had something to do with the tsconfig.json properties or path, but after changing compilerOptions, and moving the file around ( specifying its path with the tsconfigFile property inside svelte.config.js , i could not reproduce the issue.

The vite-plugin ( not included in the zip ) was installed following the directives in this repo readme.md.

envinfo.txt
canelhasio.zip

[dominikg]

the issue is caused by the fact that vite-plugin-svelte currently reads svelte.config.cjs from vites root directory

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/options.ts

Line 126 in 0e516a3

const svelteConfig = loadSvelteConfig(viteConfig.root) || {};

So for svelte to have the typescript preprocessor working you'd have to move that config into src aswell or pass it inline in vite config.
I also recommend you use the svelte-ts template from vites create app npm init @vitejs/app as a base or take a look at sveltekit. The regular svelte typesrcipt starter template is not a good base for vite projects.

Regarding svelte config location i'd love to get feedback what the best option would be for your usecase.

[canelhasmateus]

This was a existing project that i tried migrating into vite, hence the ts template. About the use case, i'm not really sure if i'm the guy to listen too - i'm mainly a backend developer, and pretty new to this whole frontend world.

That being said: i dislike the way most frontend projects pollute the root directory. Mixing compiler configurations in the same directory as the initial page seems counter-intuitive to me.

Vite configurations ( publicDir, outDir) seem to specify these directory in terms relative to the root. Maybe the plugin could follow, taking root-relative path as configuration parameters?

Since most people seem to use default configurations without second thought, i'm not exactly sure if such a change would be impactful for the "general population" Even so, it may be interesting to have in mind the public / demographic the project aims to cater to? Personally, i considered many frameworks before picking svelte, for it was: small, performant, concise, configurable.

[bhvngt]

I am facing a similar regression. I recently upgraded my package from @svitejs/vite-plugin-svelte to this repo. Now when I run vite as a dev server, I am getting following error. This use to work fine with @svitejs/vite-plugin-svelte 0.10.0. It broke with 0.11.1 and is giving the same issue when moved to this repo.

Uncaught SyntaxError: The requested module '/@fs/..../web/node_modules/.pnpm/[email protected]/node_modules/svelte/store/index.mjs?v=7d2ea93a' does not provide an export named 'Writable'

My vite.config.js is as follows

import {defineConfig} from "vite";
import svelte from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess";

export default defineConfig(() => {
  return {
    root: "src",
    plugins: [svelte({
      preprocess: sveltePreprocess({
        postcss: true
      })
    })],
  };
});

I don't have svelte.config.js inside src (vite root) as I believe I have inlined svelte configuration inside vite.config.js

[dominikg]

[email protected] added a new option configFile

either relative to vite root: svelte({configFile:"../svelte.config.js"})
or absolute: svelte({configFile:"/home/user/myglobalconfs/svelte.config.js"})

Does that solve your problems when using "src" as vite root?

[bhvngt]

Thanks @dominikg. This is working with both inline options as well as svelte.config.js located in a directory other than vite root.

Just checking if it supports svelte config as a typescript file? When I tried it, it didn't work.

[dominikg]

no, svelte.config.ts is not supported right now.
It could be added but that would have to be a concerted effort as there are other tools also reading svelte config.
You could setup your own transpile step to use it without framework support

[dominikg]

closing here as the original issue can be solved with relative configFile option added in 1.0.0-next.8: svelte({configFile:"../svelte.config.js"})