nxext / nx-extensions

Nx Extensions for Stencil, Svelte, SolidJS, Preact, Ionic, and Capacitor
MIT License
466 stars 102 forks source link

Sveltekit: svelte-add is not working #441

Open scorsi opened 2 years ago

scorsi commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

ecstrema commented 2 years ago

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