Typescript can't use animateMotion

Question

Typescript complains when I try to use animateMotion inside a React component.

Property 'animateMotion' does not exist on type 'JSX.IntrinsicElements'.

Property 'mpath' does not exist on type 'JSX.IntrinsicElements'.

Code

import * as React from 'react'

type OrbitProps = {
  duration: number;
  radius: number;
}

export const Orbit: React.FunctionComponent<OrbitProps>= ({duration, radius}) => {
  const cx = 50
  const cy = 50
  return (
      <g>
        <path
          d={`M ${cx}, ${cy}
          m -${radius}, 0
          a ${radius},${radius} 0 1,0 ${radius*2},0
          a ${radius},${radius} 0 1,0 -${radius*2},0`}
          id="ellipse1"
        />
        <circle r="3">
          <animateMotion dur={`${duration}s`} repeatCount="indefinite">
            <mpath xlinkHref="#ellipse1" />
          </animateMotion>
        </circle>
      </g>
  )
}

sdkcy · Accepted Answer · 2019-01-13T16:44:37.400

2

Edited:

declare namespace JSX { 
  interface IntrinsicElements { 
    "animateMotion": any,
    "mpath": any, 
  } 
}

Source: https://www.typescriptlang.org/docs/handbook/jsx.html

edited Jan 13 '19 at 16:44

answered Jan 13 '19 at 16:24

sdkcy

3,528
1
16
23

Already tried, and it doesn't work and it's a "native" SVG element, so it's suposed to be lowercase just like any other `div`, `svg`, `g` or whatever. – JCQuintas Jan 13 '19 at 16:26
2

Can you try this; `declare namespace JSX { interface IntrinsicElements { "animateMotion": any, "mpath": any, } }` – sdkcy Jan 13 '19 at 16:29
It worked, thanks! Add as it's own response or edit this one and I will accept it :) – JCQuintas Jan 13 '19 at 16:33
No problem and i edited my answer. Maybe it can help someone else :) – sdkcy Jan 13 '19 at 16:36
@sdkcy Would you mind taking a minute to explain how `declare namespace JSX` works? Tried searching for docs and didn't find any. – sunknudsen Jan 13 '19 at 16:38
Thanks @sdkcy! That's exactly what I was looking for. – sunknudsen Jan 13 '19 at 18:32

sunknudsen · Answer 2 · 2019-01-13T16:20:14.557

0

Have you installed npm install @types/react --save?

edited Jan 13 '19 at 16:20

answered Jan 13 '19 at 16:15

sunknudsen

6,356
3
39
76

Yes. "@types/node": "^10.12.18", "@types/react": "^16.3.13", "@types/react-dom": "^16.0.5", – JCQuintas Jan 13 '19 at 16:19
Not that this helps, but I don't think `@types/react` supports `animateMotion` and `mpath`. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2483 Trying to find a patch. – sunknudsen Jan 13 '19 at 16:35

Typescript can't use animateMotion

Code

2 Answers2