TypeStrong / TypeStrong/ts-loader

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

Open
#1,599 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.5k
Forks
439
Avg merge
17h 17m
Merged PRs (30d)
2

Description

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'.
`
image

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the reported reproduction with composer install, yarn install, and yarn build or yarn watch; inspect assets/vue/components and the Parent.vue.ts errors. Done means the dynamic-slot v-for example still shows the names at /en/blog/ without TS2322 or TS2769.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.