preact children in framer-motion causing typing errors

user_79891 0
Viewed 225

It appears to be related to ReactDOM, I get this in my preact widget (https://github.com/preactjs-templates/widget),

import { motion } from 'framer-motion';
import { h, VNode } from 'preact';

const Test = () => {
    return <motion.div>
        <div>test</div>
    </motion.div>
}

This creates the following TS error:

Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'VNode<any>' but required in type 'ReactPortal'.ts(2322)
index.d.ts(181, 9): 'children' is declared here.
framer-motion preact typescript
1 Answers

Couple options:

  1. Remove @types/react. You shouldn't install it if you're using Preact.
  2. Add the following to your tsconfig.json to override React's types:
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "react": ["./node_modules/preact/compat"],
      "react-dom": ["./node_modules/preact/compat"]
    },
    ...
  },
  ...
}
user_153881640
Related