TypeScript error with external config file ?

[mrleblanc101]

Hi, I use this is nuxt in my nuxt.config.ts like so:

import ViteSvgLoader from 'vite-svg-loader';
import svgoConfig from './svgo.config.js';

export default defineNuxtConfig({
    vite: {
        plugins: [
            ViteSvgLoader({
                svgoConfig,
            }),
        ],
    },
});

Here is my external config file svgo.config.js:

export default {
    plugins: [
        { name: 'prefixIds' },
        { name: 'removeTitle' },
        { name: 'removeDesc' },
        { name: 'removeDimensions' },
        {
            name: 'removeAttrs',
            params: {
                attrs: '(fill|stroke)',
            },
        },
    ],
};

Here is the error:

Type '{ plugins: ({ name: string; } | { name: string; params: { attrs: string; }; })[]; }' is not assignable to type 'Config'. Types of property 'plugins' are incompatible. Type '({ name: string; } | { name: string; params: { attrs: string; }; })[]' is not assignable to type 'PluginConfig[]'. Type '{ name: string; } | { name: string; params: { attrs: string; }; }' is not assignable to type 'PluginConfig'. Type '{ name: string; }' is not assignable to type 'PluginConfig'. Property 'fn' is missing in type '{ name: string; }' but required in type 'CustomPlugin'.

[gkatsanos]

@mrleblanc101 does this work properly if you switch the files into plain JS?

[mrleblanc101]

The Nuxt config ? I would guess not since it wouldn't do any type check. Haven't tried tho

[gkatsanos]

The Nuxt config ? I would guess not since it wouldn't do any type check. Haven't tried tho

I mean does the app and the plug-in work properly if you remove types / switch to JS instead of TS files.

(I suspect they don't, somethings wrong with your svgoConfig, I'd recheck the structure.)

[mrleblanc101]

The plugin work in both TS and JS mode, even with the type error. I'm a TypeScript beginner, but I think I found a way to make it work, but it requires me to install svgo as a devDependency in my project and I'm not sure its the correct solution:

import svgoConfig from './svgo.config.js';
import type { Config } from 'svgo';

export default defineNuxtConfig({
    vite: {
        plugins: [
            ViteSvgLoader({
                svgoConfig: svgoConfig as Config,
                defaultImport: 'url',
            }),
        ],
    },
});

Otherwise, I can just write the config in the nuxt.config.js directly and I have no error:

import svgoConfig from './svgo.config.js';
import type { Config } from 'svgo';

export default defineNuxtConfig({
    vite: {
        plugins: [
            ViteSvgLoader({
                svgoConfig: {
                    plugins: [
                        'prefixIds',
                        'removeTitle',
                        'removeDesc',
                        'removeDimensions',
                        {
                            name: 'removeAttrs',
                            params: {
                                attrs: '(fill|stroke)',
                            },
                        },
                    ],
                },
            }),
        ],
    },
});