React + Framework7 + Typescript

I’m having trouble with converting F7-React to Typescript.

Here is my App structure, and everything is working here:

...
import { App, View } from "framework7-react";
import { Framework7Parameters } from 'framework7/types';

export default function () {
  // Framework7 parameters here
  const f7params: Framework7Parameters = {
    id: "io.framework7.testapp", // App bundle ID
    name: "testapp", // App name
    theme: "auto", // Automatic theme detection
    // App routes
    routes,
  };

  return (
    <StateProvider initialState={store} reducer={appReducer}>
      <App {...f7params}>
        <View id="main-view" url="/home/" main className="safe-areas" />
      </App>
    </StateProvider>
  );
}

But when I’m trying to make Home Page to work is giving me an error on Page:

export default function HomePage(params: any) {
  const [store, dispatch] = useStateValue();
  return (
      <Page name="home" themeDark>
         <Test />
      </Page>
  );
}

The error says:

Type ‘{ children: Element; name: string; themeDark: true; }’ is not assignable to type ‘IntrinsicAttributes & PageProps’.
Property ‘children’ does not exist on type ‘IntrinsicAttributes & PageProps’.ts(2322)

Again, I’m still new to Typescript, not sure if this is a problem with the version that I’m using, but currently the versions are:

{
    "framework7": "^6.0.0",
    "framework7-icons": "^5.0.5",
    "framework7-react": "^6.0.0",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
}

After struggling for few days and reading tons of stack-overflow related issues, I figured it out :tada:

All I did was, to downgrade types in package.json to this:

    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",

And everything start working like a Magic :magic_wand:

Related errors were:

  1. React Type error: ‘{ children: Element; }’ has no properties in common with type ‘IntrinsicAttributes’

  2. Type errors because of types/react~17.