Ability to use Sveltekit in a mono-repository context such as with Nx

[kristianmandrup]

Describe the problem

In response to #12420 where a feature request is requested to form the basis of resolving this issue

Describe the proposed solution

When using sveltekit in a mono-repository context, the build tends to fail with the following error message:

src/app.html does not exist

The error persists if you change the file location from the svelte config.

This is due to the file resolutions being made from the current directory instead of the project's root directory. While it works totally fine in a standalone project, it can't work in a monorepository context.

The proposed solution is provide an option that specifies the root of the project in the vite adapter and to base the file resolution on the new option if it is provided while keeping the default process.cwd() directory if not provided.

The problem is, when using monorepo tooling such as Nx, Turbo, Lerna, etc, you typically run a command from the root, but then use configuration to specify the cwd overrides.

You can do this via vite.config, but sveltekit plugin does not respect that nor can you currently explicitly pass it as a parameter.

Alternatives considered

vite config contains a root option

https://vitejs.dev/config/shared-options.html

root (Default: process.cwd())
Project root directory (where index.html is located). Can be an absolute path, or a path relative to the current working directory.

From Project Root of Vite docs
Similar to static http servers, Vite has the concept of a "root directory" which your files are served from. You will see it referenced as throughout the rest of the docs.

Supposedly "sveltekit plugin does not respect that" so the better, simpler and less intrusive alternative would be to make svelkit simply respect that.

Importance

i cannot use SvelteKit without it

Additional Information

I build the entire remainder of my app centered around Nx so it would be a major pain to have to create a new monolith project solely for my Sveltekit app. I will further investigate the vite config option.

The following is a repo branch demonstrating the current issue: https://github.com/meeroslav/sveltauri/tree/sveltekit-issue

[kristianmandrup]

Looking closer at the suggested PR fix:

the root option is currently hardcoded to be set to cwd

root: cwd,

as per https://vitejs.dev/guide/api-plugin.html#config, the config method receives the raw (original config obj) and the config env as arguments.

So to expect the original vite config root, simply change to:

root: config.root ?? cwd,

I propose trying this one-liner as a "fix" first and then consider the additional cwd = process.cwd() argument if the root option is not sufficient.

/**
 * Build the SvelteKit-provided Vite config to be merged with the user's vite.config.js file.
 * @see https://vitejs.dev/guide/api-plugin.html#config
 */
config(config, config_env) {
	initial_config = config;
	vite_config_env = config_env;
	is_build = config_env.command === 'build';

	env = get_env(kit.env, vite_config_env.mode);

	const allow = new Set([
		kit.files.lib,
		kit.files.routes,
		kit.outDir,
		path.resolve('src'), // TODO this isn't correct if user changed all his files to sth else than src (like in test/options)
		path.resolve('node_modules'),
		path.resolve(vite.searchForWorkspaceRoot(cwd), 'node_modules')
	]);

	// We can only add directories to the allow list, so we find out
	// if there's a client hooks file and pass its directory
	const client_hooks = resolve_entry(kit.files.hooks.client);
	if (client_hooks) allow.add(path.dirname(client_hooks));

	const generated = path.posix.join(kit.outDir, 'generated');

	// dev and preview config can be shared
	/** @type {import('vite').UserConfig} */
	const new_config = {
		resolve: {
			alias: [
				{ find: '__SERVER__', replacement: `${generated}/server` },
				{ find: '$app', replacement: `${runtime_directory}/app` },
				...get_config_aliases(kit)
			]
		},
		root: config.root ?? cwd,
		server: {
			cors: { preflightContinue: true },
			fs: {
				allow: [...allow]
			},
			sourcemapIgnoreList,
			watch: {
				ignored: [
					// Ignore all siblings of config.kit.outDir/generated
					`${posixify(kit.outDir)}/!(generated)`
				]
			}
		},

[dominikg]

When using sveltekit in a mono-repository context, the build tends to fail with the following error message:

src/app.html does not exist

This is not universally true. I use sveltekit in multiple pnpm monorepos and never encountered this message.

[dominikg]

also see discussion in #12410

In general i agree that respecting the vite.root option is something to consider, however we have to be careful here to avoid making it a breaking change (in case vite root and cwd are different and both have a svelte.config, today sveltekit favors cwd)

[dominikg]

We also have a few conventions to keep considering for compatibility with other tools in the svelte ecosytem, i believe it is the responsibility of the monorepo tooling to provide context like cwd and vite root in a way that it works for sveltekit projects, not sveltekits responsibility to allow all kinds of custom setups without package.json or svelte.config.js in an unexpected location. ( see #12410 (comment) )
cc @meeroslav

[kristianmandrup]

I did some additional research and found the following deep in the Nx code:

https://github.com/nrwl/nx/blob/master/packages/nx/src/command-line/run/run.ts#L293

export function run(
  cwd: string,
  root: string,
  targetDescription: Target,
  overrides: { [k: string]: any },
  isVerbose: boolean,
  taskGraph: TaskGraph
) {
  const projectGraph = readCachedProjectGraph();
  return handleErrors(isVerbose, async () => {
    const projectsConfigurations =
      readProjectsConfigurationFromProjectGraph(projectGraph);
    return iteratorToProcessStatusCode(
      await runExecutorInternal(
        targetDescription,
        overrides,
        root,
        cwd,
        projectsConfigurations,
        readNxJson(),
        projectGraph,
        taskGraph,
        isVerbose
      )
    );
  });
}

The run command includes options for root and cwd. The only question is whether/if it currently parses CLI options that are translated to these arguments.

https://github.com/nrwl/nx/blob/master/packages/nx/src/command-line/nx-commands.ts

export const yargsRunCommand: CommandModule = {
  command: 'run [project][:target][:configuration] [_..]',
  describe: `Run a target for a project
    (e.g., nx run myapp:serve:production).

    You can also use the infix notation to run a target:
    (e.g., nx serve myapp --configuration=production)

    You can skip the use of Nx cache by using the --skip-nx-cache option.`,
  builder: (yargs) => withRunOneOptions(withBatch(yargs)),
  handler: async (args) => {
    const exitCode = await handleErrors(
      (args.verbose as boolean) ?? process.env.NX_VERBOSE_LOGGING === 'true',
      async () => {
        await import('./run-one').then((m) =>
          m.runOne(process.cwd(), withOverrides(args))
        );
      }
    );
    process.exit(exitCode);
  },
};

https://github.com/nrwl/nx/blob/master/packages/nx/src/command-line/run/run-one.ts

export async function runOne(
  cwd: string,
  args: { [k: string]: any },
  extraTargetDependencies: Record<
    string,
    (TargetDependencyConfig | string)[]
  > = {},
  extraOptions = {
    excludeTaskDependencies: false,
    loadDotEnvFiles: process.env.NX_LOAD_DOT_ENV_FILES !== 'false',
  } as {
    excludeTaskDependencies: boolean;
    loadDotEnvFiles: boolean;
  }
): Promise<void> {
  performance.mark('code-loading:end');
  performance.measure('code-loading', 'init-local', 'code-loading:end');
  workspaceConfigurationCheck();

  const nxJson = readNxJson();
  const projectGraph = await createProjectGraphAsync();

  const opts = parseRunOneOptions(cwd, args, projectGraph, nxJson);

shared run options

export interface RunOptions {
  exclude: string;
  parallel: string;
  maxParallel: number;
  runner: string;
  prod: boolean;
  graph: string;
  verbose: boolean;
  nxBail: boolean;
  nxIgnoreCycles: boolean;
  skipNxCache: boolean;
  cloud: boolean;
  dte: boolean;
  batch: boolean;
  useAgents: boolean;
}

export function withRunOptions<T>(yargs: Argv<T>): Argv<T & RunOptions> {
  return withVerbose(withExcludeOption(yargs))
    .option('parallel', {
      describe: 'Max number of parallel processes [default is 3]',
      type: 'string',
    })
    .option('maxParallel', {
      type: 'number',
      hidden: true,
    })
    .options('runner', {
      describe: 'This is the name of the tasks runner configured in nx.json',
      type: 'string',
    })

Nx could perhaps be modified not to be hardcoded to use process.cwd() but optionally read it from args.cwd by adding cwd as an extra option?

        await import('./run-one').then((m) =>
          const cwd = args.cwd ?? process.cwd()
          m.runOne(cwd, withOverrides(args))
        );

Would that work?

[kristianmandrup]

I agree with @dominikg "i believe it is the responsibility of the monorepo tooling to provide context like cwd and vite root in a way that it works for sveltekit projects, not sveltekits responsibility to allow all kinds of custom setups without package.json or svelte.config.js in an unexpected location."

We now know what needs to be updated in Nx to make it more flexible to work with Sveltekit f.ex

[DannyvanHolten]

Just out of curiosity. Does anyone here now if this is already brought under Nx their attention? I couldn't find anything. Just making sure before I start a thread on their github

[cromefire]

You don't even need to run nx to trigger this:

cd /tmp
mkdir demo
cd demo/
npx sv create --template minimal --types ts --no-add-ons test
npm install --save-dev vite @sveltejs/vite-plugin-svelte
npx vite --config test/vite.config.ts

I don't really think it's a great idea to rely on the cwd and it's not even any effort to patch:

kit/packages/kit/src/exports/vite/index.js

Lines 130 to 131 in 570562b

	export async function sveltekit() {
	const svelte_config = await load_config();

Just replace that with:

export async function sveltekit(root) {
	const svelte_config = await load_config({cwd: root});

and then pass the root like:

    plugins: [sveltekit(__dirname)],

and it immediately works (definitely more like a hot patch, but better than the current situation...).

[cromefire]

I agree with @dominikg "i believe it is the responsibility of the monorepo tooling to provide context like cwd and vite root in a way that it works for sveltekit projects

Well they do it in a way that works with all other tooling. The vite root works with vite itself, react, vue, typescript, only svelte just decides to simply override this option, which it for sure shouldn't do... In this case it's more svelte's responsibility not to beak vite's features and to make sure that it works like a normal vite plugin... It can't be expected of a tool like nx to just implement exceptions for every single vite plugin, just because they decide that vite options should just be overridden...

It's not like NX isn't properly supporting vite, they direct you in their docs to set the vite root to __dirname so this doesn't happen.