svelte.preprocess depends on more than 10 external files

[gerhardcit]

Building Sveltekit 2.0.6 app with vite 5.0.11 getting a lot of this.

node_modules/.pnpm/svelte-jsoneditor@0.21.1_@lezer+common@1.2.0/node_modules/svelte-jsoneditor/components/controls/navigationBar/NavigationBarDropdown.svelte svelte.preprocess depends on more than 10 external files which can cause slow builds and poor DX, try to reduce them. 

anything obvious that can cause this?

[josdejong]

I have no idea what that is about.

How can I reproduce your issue?

[madkarlsson]

In my case, it comes from the fact that I use preprocess to prepend SCSS files (mixins/functions, etc.), and it doesn't like when it's too many of them. It's probably somewhere along that line.

[josdejong]

Do you have a way to reproduce the issue for me Michael?

[madkarlsson]

Not that I can share or put together quickly unfortunately but here is the gist: In the below snippet, scssPrependData is a string that contains imports to more global SCSS imports (no actual CSS, only variables/mixins/functions and so on). When those imports become too many, it throws a warning for every component (since the import is also prepended for each component). It's hard to keep track off since the imports import things themselves as well

// Svelte config
/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
        preprocess({
            postcss: postcssConfig,
            scss: {
                prependData: scssPrependData,
            },
        }),
    ],

[josdejong]

Hm OK. So, what can cause this? I really have no clue, and without a way to reproduce I can't do any digging. Help would be welcome.

I had a look into the NavigationBarDropdown.svelte file mentioned in the first error report in this issue, that imports a file NavigationBarDropdown.scss, which imports styles.scss, which imports themes/defaults.scss and that's it. The svelte-jsoneditor project does have more than 10 components though, I'm not sure if it is counting that?

[MattPurland]

I'm not using your library, but I am getting this warning - so maybe I can provide more info.

I've just come across this issue when updating my dependencies. I'm using an old frontend library (don't ask) called Foundation Sites by Zurb. If I import the sass from this library into my components directly I now get this warning. Here's an example (I've replaced the application path for security reasons):

[vite-plugin-svelte] C://resources/js/layout/Footer.svelte svelte.preprocess depends on more than 10 external files which can cause slow builds and poor DX, try to reduce them. Found: C:\\resources\sass_settings.scss, C:\\node_modules\foundation-sites\scss\util_util.scss, C:\\node_modules\foundation-sites\scss\util_math.scss, C:\\node_modules\foundation-sites\scss\util_unit.scss, C:\\node_modules\foundation-sites\scss\util_value.scss, C:\\node_modules\foundation-sites\scss\util_direction.scss, C:\\node_modules\foundation-sites\scss\util_color.scss, C:\\node_modules\foundation-sites\scss\util_selector.scss, C:\\node_modules\foundation-sites\scss\util_flex.scss, C:\\node_modules\foundation-sites\scss\util_breakpoint.scss, C:\\node_modules\foundation-sites\scss\util_mixins.scss, C:\\node_modules\foundation-sites\scss\util_typography.scss 11:09:59 [vite-plugin-svelte] C://resources/js/layout/Header.svelte svelte.preprocess depends on more than 10 external files which can cause slow builds and poor DX, try to reduce them. Found: C:\\resources\sass_settings.scss, C:\\node_modules\foundation-sites\scss\util_util.scss, C:\\node_modules\foundation-sites\scss\util_math.scss, C:\\node_modules\foundation-sites\scss\util_unit.scss, C:\\node_modules\foundation-sites\scss\util_value.scss, C:\\node_modules\foundation-sites\scss\util_direction.scss, C:\\node_modules\foundation-sites\scss\util_color.scss, C:\\node_modules\foundation-sites\scss\util_selector.scss, C:\\node_modules\foundation-sites\scss\util_flex.scss, C:\\node_modules\foundation-sites\scss\util_breakpoint.scss, C:\\node_modules\foundation-sites\scss\util_mixins.scss, C:\\node_modules\foundation-sites\scss\util_typography.scss

Importing over 10 sass files in a svelte component seems to cause this warning.

Hope that helps

[MattPurland]

FYI: you can suppress the warning using the onwarn callback in the svelte processing in your vite config:

onwarn: (warning, handler) => {
    // e.g. don't warn on a11y-autofocus
    if (warning.code === 'a11y-click-events-have-key-events') return
    if (warning.code === 'vite-plugin-svelte-preprocess-many-dependencies') return;

    // let vite handle all other warnings normally
    handler(warning)
},

[josdejong]

Thanks for sharing your case Matt.

Importing over 10 sass files in a svelte component seems to cause this warning.

I indeed guess something like that is the case, I have no idea though which 10+ sass files this are in the case of svelte-jsoneditor: the NavigationBarDropdown.svelte component mentioned in the first error report only imports 3 sass files.

The main question at this moment: how can I reproduce this issue? Anyone able to put together a minimal demo?

[josdejong]

Closing this issue now, cannot do anything without a demo reproducing the issue.

Please reopen if you have an example demonstrating the issue.