0

I'm on a Javascript project (create-react-app 2.0), using the tsserver but not Typescript (yes, it is possible), and I'm getting this linting error:

Property 'svg-icon' does not exist on type 'JSX.intrinsictElements'.

When doing something like:

<div>
  <svg-icons icon="student" />
</div>

I know from other resources it has to do with declaring a namespace, however since my project is purely Javascript with a jsconfig.json file, I don't know if this solution still applies, and where would I put the file containing this namespace.

For extra context, the svg-icon web component is installed by one of our internal libraries and I don't handle it, but I think I don't need details from it to fix the linting here(?)

How can I fix this?

Code Maniac
  • 37,143
  • 5
  • 39
  • 60
Christopher Francisco
  • 15,672
  • 28
  • 94
  • 206

1 Answers1

0

You need to write a type declaration file (.d.ts) for the project which provides svg-icon. (The .d.ts file is where you'd put the namespace.)

If you can modify the project providing svg-icon

Ideally, the .d.ts should go inside the project which provides svg-icon. Create a file index.d.ts at the root of the project which contains (at minimum):

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'svg-icon': any; // you could potentially make this type more specific
    }
  }
}

Then reference the file by adding a typings field in the project's package.json:

{
  "typings": "./index.d.ts"
  ...
}

When you import the other project in your project, the types should (hopefully) be picked up automatically.

If you can't modify the other project

I couldn't find a straightforward way to do this... See this question for some ideas which you might be able to adapt to your needs.

(The typical approach you'd use in a TS project is to put your custom typings inside a typings folder and reference the folder in tsconfig.json typeRoots, but apparently that doesn't work in JS projects.)

ecraig12345
  • 2,328
  • 1
  • 19
  • 26
  • This creates an error: Could not install from "index.d.ts" as it does not contain a package.json file. – mac Oct 11 '20 at 19:36