Type 'boolean' is not assignable to type 'string'.js(2322)

user_8994249 0
Viewed 223

Greeting to whomever reads this.

I want to preface this by saying that I'm very new to Svelte and to Component Frameworks as a whole.

While working on a small project I needed to use fonts from Google Fonts. I've used these fonts before (in a vanilla JavaScript project) without issue, but this time I had a small problem.

First, I didn't know where to put the link tags. After some searching I came across this stackoverflow post How do you load and use a custom font in Svelte, to which I used the second solution.

In my code, that looks like this

App.svelte

<svelte:head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</svelte:head>

However, I noticed that the was a red line under crossorigin and when I looked at it, it gave me the exception that you can see in the title of this post.

I'd appreciate an explanation on why this is the case and what I can do to solve this. Thank you in advanced to whomever answers this.

svelte
1 Answers

The type checker does not like the way you set the crossorigin attribute. Attributes without a value, as you specified it, imply in Svelte that the property is a boolean, where it not existing means false and it being set is true.

The attribute however accepts multiple values ('anonymous' or 'use-credentials') so it is typed as string. Not setting a value is not incorrect HTML (and the output will work) but to silence the error use:

crossorigin=""

Or:

crossorigin="anonymous"

Which is the default.

user_5467300
Related