TS2322: Type 'number' is not assignable to type 'SSRSlot'

[michaelcozzolino]

Expected Behaviour

The error in the pic should not be shown.

Actual Behaviour

when using dynamic slot with v-for with vue components, i'm getting the following errors:

error in /home/michael/Development/app/symfony-demo-vue-bug/assets/vue/components/Parent.vue.ts 8:00:25 AM

[tsl] ERROR in /home/michael/Development/app/symfony-demo-vue-bug/assets/vue/components/Parent.vue.ts(5,93) TS2322: Type 'number' is not assignable to type 'SSRSlot'.

error in /home/michael/Development/app/symfony-demo-vue-bug/assets/vue/components/Parent.vue.ts 8:00:25 AM

[tsl] ERROR in /home/michael/Development/app/symfony-demo-vue-bug/assets/vue/components/Parent.vue.ts(6,37) TS2769: No overload matches this call. The last overload gave the following error. Argument of type '<K extends string | number | symbol>(slotName: any) => { name: any; fn: Function; }' is not assignable to parameter of type '<K extends string | number | symbol>(value: any, key: K, index: number) => VNodeChild'. Type '{ name: any; fn: Function; }' is not assignable to type 'VNodeChild'. `

I tried to create a vue app with the same components without webpack and it compiles without errors.

Steps to Reproduce the Problem

steps to reproduce: 1) git clone https://github.com/michaelcozzolino/symfony-demo-vue-bug 2) composer install 3) yarn install 4) yarn watch or yarn build 5) observe the errors 6) php -S localhost:8000 -t public/

The components are in assets/vue/components and the purpose of them is to show a list of names by using dynamic slot names. by going to http://localhost:8000/en/blog/ the names are shown correctly.

Location of a Minimal Repository that Demonstrates the Issue.

https://github.com/michaelcozzolino/symfony-demo-vue-bug

[antogno]

I had the same problem and I tried to solve it by setting the transpileOnly option (see https://github.com/inertiajs/inertia/issues/1070#issuecomment-1084826500), but it didn't work.

The working solution for me was using the fork-ts-checker-webpack-plugin in webpack.mix.js, just like suggested here.

This is how my webpack.mix.js looks like now:

const mix = require('laravel-mix');

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [new ForkTsCheckerWebpackPlugin()],
    resolve: {
        extensions: ['.*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
    },
})
    .setPublicPath('./webroot')
    .options({ processCssUrls: true });

mix.js('resources/js/foo.js', 'webroot/js/AssetMix')
    .ts('resources/js/bar/src/main.ts', 'webroot/js/AssetMix/bar.js')
    .vue({ version: 3 })
    .version();

if (!mix.inProduction()) {
    mix.sourceMaps();
}

[l00sed]

Thanks a lot for your response @antogno. The fork-ts-checker-webpack-plugin also worked for me. I was a little concerned at first because your configuration example is a little daunting. However, the Webpack plugin was key to getting it working.

The implementation was actually more straightforward than I expected, at least for Webpack >5.92.x:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 /* or */
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';

/* then */
export default function() {
  return {
    ...
    plugins: [new ForkTsCheckerWebpackPlugin()],
    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: 'ts-loader'
        }
      ]
    }
    ...
  }
}

The configuration example in their readme is good if you're not using ESM.