Property 'swiper-container' does not exist on type 'JSX.IntrinsicElements'

[adamvilmin]

I'm following the instructions for react usage with the web components and still getting the Property 'swiper-container' does not exist on type 'JSX.IntrinsicElements' error from Typescript. I saw the .d.ts files have been added after much discussion, but I'm not sure if there's something I need to be doing to configure that. Thanks!

[bmatzner]

If, as you suggest, you already have a .d.ts file that contains something like this:

declare namespace JSX { interface IntrinsicElements { "swiper-container": any; "swiper-slide": any; } }

you may want to check if you have the path to your .d.ts file in the "include" array in your tsconfig.json

[adamvilmin]

@bmatzner should the ones included in the npm package not work? I'm just not sure if I need to do something with those ones. My tsconfig seems to be locating other packages' types fine. I'm just pretty new to web components being in React and never imported them from a lib before.

Here's my tsconfig for reference:

{
  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "module": "ES2022",
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "types": ["@shopify/oxygen-workers-types"],
    "paths": {
      "~/*": ["app/*"]
    },
    "noEmit": true
  }
}

[bmatzner]

Just adding the types fixed it for me. Just ran across this library moments ago, literally. Just here to fix some follow-up issues…