hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.32k stars 285 forks source link

Type incompatible error in 8.0.0-beta.0 #672

Open LittleSaya opened 2 days ago

LittleSaya commented 2 days ago

Describe the bug

When using Button like this:

<script lang="ts">
    import '../app.css';
    let { children } = $props();

    import Button, { Label } from '@smui/button';
</script>

<Button>
    <Label>sss</Label>
</Button>
{@render children()}

I get error:

Type '{ children: () => any; }' is not assignable to type 'Record<string, never> & { children?: any; }'.
  Type '{ children: () => any; }' is not assignable to type 'Record<string, never>'.
    Property 'children' is incompatible with index signature.
      Type '() => any' is not assignable to type 'never'.ts(2322)

To Reproduce

  1. pnpx sv create --template minimal --types ts svelte5_smui8_demo
  2. choose eslint + tailwindcss
  3. no tailwindcss plugin
  4. choose pnpm
  5. open project with vscode, enable svelte typescript plugin if asked (I'm using vscode with 'Svelte for VS Code' extension)
  6. pnpm add --save-dev @smui/button@8.0.0-beta.0
  7. pnpm add --save-dev smui-theme@8.0.0-beta.0
  8. import Button and use it like above

Update: I just checked that enabling the typescript plugin or not does not make a difference.

Expected behavior

No typescript error occurs.

Screenshots

Screenshot 2024-11-19 213751

Desktop (please complete the following information):

Additional context

A small reproduction, the Button is used in src/routes/+layout.svelte

svelte5_smui8_demo.zip