Sveltekit: svelte-add is not working

[scorsi]

Describe the bug When running nx add {sveltekit-app} --package {package} it fails with error.

To Reproduce Steps to reproduce the behavior: I simply create a new project with sveltekit plugin:

nx g @nxext/sveltekit:app frontend
nx add frontend --package tailwindcss

Expected behavior Should work :)

Additional context

❯ nx add frontend --package tailwindcss
➕ Svelte Add (Version 2022.01.19.00)
There is no valid Svelte project in this directory because there doesn't seem to be a bundler installed (Vite, Rollup, Snowpack, or webpack).
Create or find an existing issue at https://github.com/svelte-add/svelte-add/issues if this is wrong.
ERROR: Something went wrong in @nrwl/run-commands - Command failed: npx svelte-add tailwindcss

[DominikPieper]

Hey, sorry for the delay. I'll try to fix it soon. Unfortunately, Sveeltekit didn't get much love for some time. Now where it's nearer to the 1.0 I hope the API stays more stable. Unfortunately, the Sveltekit CLI doesn't give a lot of possibilities to manipulate e.g. the output folder to match the Nx folder scheme and that makes the integration at all really hard

[scorsi]

I understand ! To be honest I left NX to have a old styled monorepo. I run into too much issues with SvelteKit and Firebase inside NX... I keep an eye at your extensions ;)

[ecstrema]

Hey, sorry for the delay. I'll try to fix it soon. Unfortunately, Sveeltekit didn't get much love for some time. Now where it's nearer to the 1.0 I hope the API stays more stable. Unfortunately, the Sveltekit CLI doesn't give a lot of possibilities to manipulate e.g. the output folder to match the Nx folder scheme and that makes the integration at all really hard

The default output folder can be set with kit.vite.build.outputDir (or something alike).

The output folder for packaging can be set with kit.package.dir option.

That's not the cli, but it still provides the necessary options.

I'm currently using the sveltekit plugin, and it works perfectly. I simply had to change svelte.config.js to:

import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        package: {
            dir: "../../dist/packages/svelte/package"
        },
        vite: {
            build: {
                outDir: "../../dist/packages/svelte/build"
            }
        }
    },
};

export default config;

Btw, that last fix removing target="#svelte" is great. Could it be published on npm?

[DominikPieper]

@Marr11317 oh great thank you. Seems I have to take a look at it again. I’ll release a new version soon and add your suggestion as well.

[ecstrema]

Apparently, the value for kit.vite.build.outDir is controlled by svelte and cannot be customised. I'll open an issue.

[ecstrema]

see https://github.com/sveltejs/kit/issues/4052