Uncaught (in promise) ReferenceError: props is not defined

[samehdoush]

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
    Memory: 14.36 GB / 31.92 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.35)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vite: ^4.2.1 => 4.3.5
    vue: ^3.2.47 => 3.3.1
 

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import { VitePWA } from 'vite-plugin-pwa'
import ViteFonts from 'vite-plugin-fonts'
import viteCompression from 'vite-plugin-compression';
import webfontDownload from 'vite-plugin-webfont-dl';


const path = require('path');
const ssrTransformCustomDirective = () => {
    return {
        props: [],
        needRuntime: true,
    }
}
export default defineConfig(({ command, mode }) => {

    return {

        resolve: {
            alias: {
                '@': path.resolve('resources/js'),
                '@themeConfig': path.resolve('themeConfig.js'),
                '@img': path.resolve('resources/img')
            },
        },
        build: {
            sourcemap: command === 'serve' || mode === 'development' ? true : false,


        },
        plugins: [
            ViteFonts({

                google: {
                    preload: true,
                    families: [{
                        name: 'Nunito',
                        styles: 'wght@400;600;700',
                        defer: true,
                    }],
                },
            }),
            VitePWA({
                registerType: 'autoUpdate',
                devOptions: {
                    enabled: false
                }
            }),
            laravel({

                input: ['resources/css/app.css', 'resources/js/app.js'],

                ssr: 'resources/js/ssr.js',
                refresh: true,
            }),
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    },

                },
            }),
            vuetify({
                autoImport: true,
                styles: command === 'serve' || mode === 'development' ? 'sass' : true,

            }),
            viteCompression(),
            webfontDownload(),
            // chunkSplitPlugin(),


        ],
        ssgOptions: {
            script: 'sync',
            formatting: 'minify',
            crittersOptions: false,
        },
        optimizeDeps: {
            include: [
                'vue',
            ],
            exclude: [
                'vue-demi',

            ],
        },
        ssr: {
            noExternal: ['@inertiajs/vue3/server', /\.css$/, /\?vue&type=style/, 'vuetify', /^vue-toastification/, 'vue-toastification', 'datatables.net-vue3','dom-to-image-more', '@vueup/vue-quill', 'vue-filepond', 'vue-tel-input', "date-fns", 'vue3-emoji-picker'],
          
        },
    }

});

index.vue

<script setup>

const { tasks, type, errors, filters } = defineProps({
    tasks: {
        type: Object,
        default: () => ({}),
        required: false,
    },
    type: {
        type: String,
        required: false,
    },
    errors: {
        type: Object,
        required: false,
    },
    filters: {
        type: Object,
        default: () => ({}),
        required: false,
    },
})

console.log(tasks); // Uncaught (in promise) ReferenceError: tasks is not defined

vue :
3.2.47 => no issue
3.3.1 => Uncaught (in promise) ReferenceError: tasks is not defined

What is the cause of the problem ?