Error while generate an admin interface using api platform/admin and react-admin

Question

Indeed, I am using api platform to develop an api with Symfony. However, when I want to generate an admin interface using api platform/admin and react-admin, I receive this error in my console:

@api-platform_admin.js?v=5df60b07:115027 Uncaught TypeError: Cannot read properties of undefined (reading 'mode') at ToggleThemeLegacyButton (@api-platform_admin.js?v=5df60b07:115027:97) at renderWithHooks (chunk-KXIZOLV7.js?v=5df60b07:12169:26) at mountIndeterminateComponent (chunk-KXIZOLV7.js?v=5df60b07:14919:21) at beginWork (chunk-KXIZOLV7.js?v=5df60b07:15900:22) at HTMLUnknownElement.callCallback2 (chunk-KXIZOLV7.js?v=5df60b07:3672:22) at Object.invokeGuardedCallbackDev (chunk-KXIZOLV7.js?v=5df60b07:3697:24) at invokeGuardedCallback (chunk-KXIZOLV7.js?v=5df60b07:3731:39) at beginWork$1 (chunk-KXIZOLV7.js?v=5df60b07:19759:15) at performUnitOfWork (chunk-KXIZOLV7.js?v=5df60b07:19192:20) at workLoopSync (chunk-KXIZOLV7.js?v=5df60b07:19131:13)

And here is my App.tsx file:

import { HydraAdmin } from "@api-platform/admin";

export const App = () => (
  <HydraAdmin entrypoint="http://localhost:8000/api" >
  </HydraAdmin>
);

I have followed again and again what is in the api platform documentation but to no avail.

Answer 1

I found the solution to this.

There is a bug in that ToggleThemeLegacyButton class. If you look at its docs, you'll see it it deprecated. To avoid the problem you have to pass the lightTheme and darkTheme props in explicitly. Here is my App.js:

import { defaultTheme } from 'react-admin';
import { HydraAdmin, OpenApiAdmin } from '@api-platform/admin'

const lightTheme = defaultTheme;
const darkTheme = { ...defaultTheme, palette: { mode: 'dark' } };

// export default () =>   <HydraAdmin
//   theme={lightTheme}
//   darkTheme={darkTheme}
//   entrypoint="http://127.0.0.1:8000/api" />;

export default () => <OpenApiAdmin
  docEntrypoint="http://127.0.0.1:8000/api/docs.jsonopenapi"
  entrypoint="http://127.0.0.1:8000/api/admin"
  theme={lightTheme}
  darkTheme={darkTheme}
/>;

And if you're using TypeScript, use this:

import { Layout } from "react-admin";
import { OpenApiAdmin, HydraAdmin } from "@api-platform/admin";
import { authProvider } from "./authProvider";
import { AppBar, ToggleThemeButton } from "react-admin";

export const MyAppBar = () => <AppBar toolbar={<ToggleThemeButton />} />;

const MyLayout = (props: any) => <Layout {...props} appBar={MyAppBar} />;

// export const App = () => (
//   <HydraAdmin
//     entrypoint="http://127.0.0.1:8000/api"
//     authProvider={authProvider}
//     layout={MyLayout}
//     darkTheme={{ palette: { mode: "dark" } }}
//   />
// );

export const App = () => (
  <OpenApiAdmin
    docEntrypoint="http://127.0.0.1:8000/api/docs.jsonopenapi"
    entrypoint="http://127.0.0.1:8000/api/admin"
    authProvider={authProvider}
    layout={MyLayout}
    darkTheme={{ palette: { mode: "dark" } }}
  />
);