Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type incompatible error in 8.0.0-beta.0 #672

Open
LittleSaya opened this issue Nov 19, 2024 · 5 comments
Open

Type incompatible error in 8.0.0-beta.0 #672

LittleSaya opened this issue Nov 19, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@LittleSaya
Copy link

LittleSaya commented Nov 19, 2024

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/[email protected]
  7. pnpm add --save-dev [email protected]
  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):

  • nodejs: 20.11.0
  • vscode: 1.59.3
  • pnpm: 8.15.1
  • OS: Windows 10 x86_64

Additional context

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

svelte5_smui8_demo.zip

@LittleSaya LittleSaya added the bug Something isn't working label Nov 19, 2024
@mobilarte
Copy link

Probably changing this in your svelte.config.js file will help.

   ...
   preprocess: vitePreprocess( {script: false} ),
   compilerOptions: {
		runes: true // Which could also be false if you want to force the Svelte 4 compiler/syntax
   },
   ...

@alex-simplyonce
Copy link

@LittleSaya @hperrin
Any updates on this?
I can't figure out how to make Typings work with Svelte 5 + SMUI 8 ... I am getting a lot of errors similar to Type '() => number' is not assignable to type 'never'. for almost every component

Using a new SvelteKit installation and following the Installation steps from SMUI / I don't want to stick with Svelte4

@hperrin
Copy link
Owner

hperrin commented Dec 10, 2024

@alex-simplyonce I have the fix ready to go, but NPM was down (like, doing maintenance and wouldn't accept publishes) when I tried to push it on Sunday. I won't be able to try again until day after tomorrow.

@mobilarte
Copy link

Problem fixed with 8.0.0-beta.2.
Works with this in svelte.config.js:

preprocess: vitePreprocess({ script: true }),
	compilerOptions: {
		runes: true, 
...

@hperrin
Copy link
Owner

hperrin commented Dec 15, 2024

Problem fixed with 8.0.0-beta.2.
Works with this in svelte.config.js:

preprocess: vitePreprocess({ script: true }),
	compilerOptions: {
		runes: true, 
...

You shouldn't need the runes: true part, because every SMUI file turns in runes mode explicitly with svelte:options.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants