Wired type errors when using TypeScript + <slot> + SSR

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-vue3 version: 0.6.0

Describe the problem:

Wired type errors when using TypeScript + <slot> + SSR.

Steps to reproduce:

I forked pingcrm and made a single commit to reproduce the problem.

• The only change component is resources/js/Shared/Layout.vue.

git clone https://github.com/xieyuheng/pingcrm
cd pingcrm; yarn; yarn ssr:build

Please see this commit for changed files: https://github.com/xieyuheng/pingcrm/commit/fecd31f551ee528a7ce905905de3e2728ff19119

Errors

✖ Mix
  Compiled with some errors in 4.72s

ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts
28:4-11
[tsl] ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts(28,5)
      TS2322: Type 'Function' is not assignable to type 'SSRSlot'.
  Type 'Function' provides no match for the signature '(props: Props, push: PushFn, parentComponent: ComponentInternalInstance | null, scopeId: string | null): void'.

ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts
28:23-24
[tsl] ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts(28,24)
      TS7006: Parameter '_' implicitly has an 'any' type.

ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts
28:26-31
[tsl] ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts(28,27)
      TS7006: Parameter '_push' implicitly has an 'any' type.

ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts
28:33-40
[tsl] ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts(28,34)
      TS7006: Parameter '_parent' implicitly has an 'any' type.

ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts
28:42-50
[tsl] ERROR in /home/xyh/backup/pingcrm/resources/js/Shared/Layout.vue.ts(28,43)
      TS7006: Parameter '_scopeId' implicitly has an 'any' type.

...

webpack compiled with 51 errors

[ycs77]

Hey @xieyuheng

Can set ts-loader options transpileOnly: true to skip type check for inertia SSR:

webpack.ssr.mix.js

mix
  .options({ manifest: false })
  .ts('resources/js/ssr.ts', 'public/js', { transpileOnly: true }) // add `transpileOnly` option
  .vue({ version: 3, options: { optimizeSSR: true } })
  .webpackConfig({
    ...webpackConfig,
    target: 'node',
    externals: [webpackNodeExternals()],
  })

see: https://github.com/TypeStrong/ts-loader#transpileonly

[xieyuheng]

Hi @henryavila

Sorry for late reply.

I use ts in my app, just not in vue files.

For examples:

❯ ll resources/js/datatypes/
total 32K
-rw-r--r-- 1 xyh xyh 265 Mar 10 04:14 access-token.js
-rw-r--r-- 1 xyh xyh 454 Mar  2 21:11 access-token.ts
-rw-r--r-- 1 xyh xyh 138 Mar 10 04:14 author-config.js
-rw-r--r-- 1 xyh xyh 246 Mar  5 11:23 author-config.ts
-rw-r--r-- 1 xyh xyh 405 Mar 10 04:14 project.js
-rw-r--r-- 1 xyh xyh 702 Feb 27 05:16 project.ts
-rw-r--r-- 1 xyh xyh 252 Mar 10 04:14 user.js
-rw-r--r-- 1 xyh xyh 445 Mar  6 00:56 user.ts

❯ ll resources/js/models/project/
total 40K
-rw-r--r-- 1 xyh xyh   11 Mar 10 04:14 content.js
-rw-r--r-- 1 xyh xyh  121 Feb 20 04:05 content.ts
-rw-r--r-- 1 xyh xyh  126 Mar 10 04:14 index.js
-rw-r--r-- 1 xyh xyh  122 Feb 20 04:04 index.ts
-rw-r--r-- 1 xyh xyh 2.4K Mar 10 04:14 project-factory.js
-rw-r--r-- 1 xyh xyh 1.6K Feb 20 05:31 project-factory.ts
-rw-r--r-- 1 xyh xyh  746 Mar 10 04:14 project.js
-rw-r--r-- 1 xyh xyh 1.3K Mar 10 04:14 project-paginator.js
-rw-r--r-- 1 xyh xyh  962 Feb 20 04:39 project-paginator.ts
-rw-r--r-- 1 xyh xyh  432 Feb 20 04:04 project.ts

❯ ll resources/js/pages/authors/
total 40K
-rw-r--r-- 1 xyh xyh  601 Mar  5 23:30 AuthorHeader.vue
-rw-r--r-- 1 xyh xyh  426 Mar  5 23:30 AuthorLayout.vue
-rw-r--r-- 1 xyh xyh  238 Mar 10 04:14 author-list-state.js
-rw-r--r-- 1 xyh xyh  130 Mar  6 00:59 author-list-state.ts
-rw-r--r-- 1 xyh xyh 2.3K Mar  8 14:37 AuthorList.vue
-rw-r--r-- 1 xyh xyh 1.1K Mar 10 06:54 AuthorPage.vue
-rw-r--r-- 1 xyh xyh  764 Mar  8 14:37 AuthorSlogan.vue
-rw-r--r-- 1 xyh xyh 2.0K Mar 10 04:14 author-state.js
-rw-r--r-- 1 xyh xyh 1.3K Mar  5 11:57 author-state.ts
-rw-r--r-- 1 xyh xyh  536 Mar  5 23:30 AuthorTabs.vue

Here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "baseUrl": ".",
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["resources/js"]
}

Here is my webpack.mix.js:

const mix = require("laravel-mix")

mix
  .js("resources/js/app.js", "public/js")
  .extract()
  .vue({ version: 3 })
  .css("resources/css/app.css", "public/css", [require("tailwindcss")])
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: [{ loader: "ignore-loader" }],
        },
      ],
    },
  })
  .version()

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

Here is my webpack.ssr.mix.js:

const mix = require("laravel-mix")
const webpackNodeExternals = require("webpack-node-externals")

mix
  .options({ manifest: false })
  .js("resources/js/ssr.js", "public/js/ssr/index.js")
  .vue({
    version: 3,
    extractStyles: "css/ssr/ignored.css",
    options: { optimizeSSR: true },
  })
  .webpackConfig({
    target: "node",
    externals: [webpackNodeExternals()],
    module: {
      rules: [{ test: /\.ts$/, use: [{ loader: "ignore-loader" }] }],
    },
  })