S
SolidJS•3y ago
Bersaelor

`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
stiba•3y 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
BersaelorOP•3y 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
stiba•3y ago
What does your tsconfig.json look like?
Bersaelor
BersaelorOP•3y 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
stiba•3y ago
Aha. playsinline isn't actually a valid attribute on an audio element. It's only for videos.
stiba
stiba•3y 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
stiba•3y 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
BersaelorOP•3y ago
huh, alright, maybe I don't need it then

Did you find this page helpful?