SolidJS•16mo ago

`crossOrigin` and `playsInline` types don't work with solid & typescript

When running tsc --jsx preserve -t es2020 --outDir js --noEmit false on my solidjs site, I get the following compile errors. What gives?

src/components/MainPlayer.tsx:117:18 - error TS2322: Type '{ children: Element; playsInline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'.
  Property 'playsInline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'.

117           <audio playsInline>
                     ~~~~~~~~~~~

src/components/OGHeader.tsx:40:63 - error TS2322: Type 'true' is not assignable to type 'HTMLCrossorigin | undefined'.

40       <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin/ >
                                                                 ~~~~~~~~~~~

  node_modules/solid-js/types/jsx.d.ts:872:5
    872     crossOrigin?: HTMLCrossorigin;
            ~~~~~~~~~~~
    The expected type comes from property 'crossOrigin' which is declared here on type 'LinkHTMLAttributes<HTMLLinkElement>'

src/components/MainPlayer.tsx:117:18 - error TS2322: Type '{ children: Element; playsInline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'.
  Property 'playsInline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'.

117           <audio playsInline>
                     ~~~~~~~~~~~

src/components/OGHeader.tsx:40:63 - error TS2322: Type 'true' is not assignable to type 'HTMLCrossorigin | undefined'.

40       <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin/ >
                                                                 ~~~~~~~~~~~

  node_modules/solid-js/types/jsx.d.ts:872:5
    872     crossOrigin?: HTMLCrossorigin;
            ~~~~~~~~~~~
    The expected type comes from property 'crossOrigin' which is declared here on type 'LinkHTMLAttributes<HTMLLinkElement>'

8 Replies

stiba•16mo ago

it's not camelcased in solidjs. try

<audio playsinline />
<link crossorigin="anonymous" />

<audio playsinline />
<link crossorigin="anonymous" />

Edit: Looks like both crossOrigin and crossorigin is supported on link with solidjs, but it's not a boolean so you'll have to pass it either anonymous or use-credentials

Bersaelor•16mo ago

Thank you, that fixed the crossorigin but didn't work for the playsinline:

$ tsc --jsx preserve -t es2020 --outDir js --noEmit false
src/components/MainPlayer.tsx:116:18 - error TS2322: Type '{ children: Element; playsinline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'.
  Property 'playsinline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'.

116           <audio playsinline>
                     ~~~~~~~~~~~

$ tsc --jsx preserve -t es2020 --outDir js --noEmit false
src/components/MainPlayer.tsx:116:18 - error TS2322: Type '{ children: Element; playsinline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'.
  Property 'playsinline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'.

116           <audio playsinline>
                     ~~~~~~~~~~~

stiba•16mo ago

What does your tsconfig.json look like?

Bersaelor•16mo ago

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

stiba•16mo ago

Aha. playsinline isn't actually a valid attribute on an audio element. It's only for videos.

stiba•16mo ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

: The Embed Audio element - HTML: HyperText Markup Language | MDN

The HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

stiba•16mo ago

<video>

playsinline

A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

Bersaelor•16mo ago

huh, alright, maybe I don't need it then

Gaming

Programming

`crossOrigin` and `playsInline` types don't work with solid & typescript