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:

module.exports = {
    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.)