react-admin Type error MenuItemLink

./layout/Menu.tsx:38:8 Type error: Type '{ to: string; primaryText: string; leftIcon: Element; dense: boolean; }' is missing the following properties from type 'Pick<any, "title" | "alignItems" | "color" | "translate" | "button" | "hidden" | "exact" | "strict" | "style" | "dense" | "disabled" | "replace" | "children" | "classes" | "slot" | ... 276 more ... | "ContainerProps">': title, alignItems, color, translate, and 284 more.

I haven't added or removed anyfields, they are identical with https://github.com/marmelab/react-admin/blob/1cb407b5085e52ed1cf0d4c1a69e9759b3143189/examples/demo/src/layout/Menu.tsx

Sep 12 '21 14:09 mshd

Please use the issue template, and provide a way to reproduce the problem

Sep 14 '21 09:09 fzaninotto

Have the same issue. Managed to reproduce with a clean project by doing the following steps:

Create new blank react app using typescript template: npx create-react-app my-app --template typescript
cd my-app/
yarn add react-admin ra-data-json-server prop-types
replace the content of App.tsx with the following:

import React from 'react';
import {Admin, MenuItemLink} from "react-admin";
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const Dashboard = () => {
  return (
      <MenuItemLink primaryText="testing" />
  )
}

function App() {
  return (
    <Admin dataProvider={dataProvider} dashboard={Dashboard} />
  );
}

export default App;

Environment

React-admin version: 3.18.1
React version: 17.0.2
Typescript version: 4.1.2

Sep 15 '21 12:09 ljardim

Thanks, I managed to reproduce the issue in https://codesandbox.io/s/dry-pond-for9c?file=/src/App.tsx, but not in the Simple example - no matter how I tweak the TypeScript config. Note that I also never met this error in any project.

Besides, I have absolutely no idea about what hTypeScript complains about.

I'd love a helping hand if someone loves cryptic TypeScript messages.

Sep 17 '21 16:09 fzaninotto

Same problem here =(

Sep 17 '21 20:09 rsjunior

Seems to work by ignoring it using ts-ignore above MenuItemLink as a temporary workaround:

{/@ts-ignore/}

Sep 18 '21 08:09 ljardim

Same error only on my Vercel dev app. On VS Code doesn't appear.

Sep 22 '21 13:09 TannicArturo98

Have the same error.

Sep 29 '21 12:09 mvanderblom

React-admin version: 3.19.0
React version: 17.0.2
Typescript version: 4.4.4

with the demo, i got the same error

Oct 29 '21 09:10 bale836

@bale836 I still can't reproduce it with the demo. Can you please explain step-by-step how you did it?

Oct 29 '21 10:10 fzaninotto

Same problem here, the error does not really tell which properties are missing. I could reproduce with the demo.

Nov 10 '21 11:11 padmalcom

@padmalcom can you explain how exactly you reproduced it?

Nov 10 '21 16:11 fzaninotto

@fzaninotto It is difficult for me to reproduce the steps since I used the demo to learn an built it up step by step. When I customized the menu by copying the code, the exact error from @mshd appears. As stated by @ljardim, adding @ts-ignore surpresses the issue (which does not really seem to be one, since everything works as expected).

    return (
        // @ts-ignore
        <MenuItemLink
            ref={ref}
            to="/configuration"
            primaryText={translate('pos.configuration')}
            leftIcon={<SettingsIcon />}
            onClick={props.onClick}
            sidebarIsOpen
        />
    );

I wish I could give you more information but I come from the java world and I'm not yet too familiar with debugging in JS.

Nov 11 '21 10:11 padmalcom

same issue when I re-use Menu and SubMenu from the poster demo https://github.com/marmelab/react-admin/blob/master/examples/demo/src/layout/Menu.tsx. I'm also inserting {/* @ts-ignore */} above <MenuItemLink> elements to suppress the error.