Admin is crashing after response from api/contexts/Entrypoint (in Loading Screen)

[basti4557]

API Platform version(s) affected: 3.2.10 (React Admin), PHP Side (3.2.10)

Description
The api-platform/admin Package in Version 3.4.5 is not working with the API Platform Core 3.2.10 in Symfony 6.4.
The Administration interface is in Loading state and is getting the following 3 ajax requests without problems:

But after Getting the Entrypoint response it crashes with an bunch of errors as output:

I tried it with an fresh installation of 6.4, which is showing the react admin welcome screen at the beginning. After adding the first entity (with the MakerBundle and just one field) the behaviour to crash begins again. Same thing in 7.0.1.

How to reproduce
https://github.com/basti4557/apiplatformcrash

[openforce-jp]

I also encountered the same error.
api platform admin also works on symfony6.4, but you need to copy the pwa's package.json and pnpm.lock.yaml from api-platform/demo and run pnpm install.

https://github.com/api-platform/demo/tree/main/pwa

[basti4557]

Thanks @openforce-jp, your solution works fine :) But there should be an official fix anyways i think

[grichards]

I'm current experiencing this same problem.

I don't understand the proposed solution... the package.json file from the demo has a bunch of extra packages (like next) that I don't want... and it's specifying the same version of api platform that I have installed.

What exactly about that package.json is solving this for you?

[grichards]

I found the actual problem and a workaround if not a solution.

That ToggleThemeLegacyButton class is deprecated and line 33 has a bug, not testing whether the property it's accessing acutally exists.

To work around it, you can do what the deprecation notice advises and pass the light and dark theme props in explicitly in your admin component as shown here.

For instance, here is my revised 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"
  theme={lightTheme}
  darkTheme={darkTheme}
/>;

[pomporov]

Hi

i try

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

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

export default () => <HydraAdmin
   theme={lightTheme}
   darkTheme={darkTheme}
   entrypoint="https://demo.api-platform.com" />;

but still have the same error

Cannot read properties of undefined (reading 'mode')
TypeError: Cannot read properties of undefined (reading 'mode')
at ToggleThemeLegacyButton (http://localhost:3000/static/js/bundle.js:99115:97)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:133316:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:136600:17)
at beginWork (http://localhost:3000/static/js/bundle.js:137896:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:122912:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:122956:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:123013:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:142877:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:142125:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:142048:9)

[grichards]

I believe it will depend on whether you're using JavaScript or TypeScript. My bet is you're using TypeScript.

So maybe you installed ReactAdmin and then install @api-platform/admin on top of that? If you do it that way, the installation will default to TypeScript. I believe if you install per the docs which is just npm i @api-platform/admin, you end up with a JavaScript installation by default.

Anyhow, presuming you're working with TypeScript, try this instead:

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" } }}
  />
);

Basically, you are specifying the newer ToggleThemeButton component to override the deprecated one that is loading by default, and you're passing type safe properties.

G

[pomporov]

Hi

thank you , it saved the day !

Its strange nobody fixed this in the repo as all new users will have to hack this on order to get it running .

Thanks again !!

[LinkolnIV]

Thx @grichards ,your description of this problem and solution very help me.

[AchillesKal]

I am experiencing the same issue on a fresh API platform distribution install.

[rubobaquero]

Thanks for the solution @grichards .

Can somebody explain how to fix it using the https://github.com/api-platform/api-platform public template? Maybe @pomporov or @LinkolnIV .

Thanks in advance for your help!

[botjaeger]

This does not work with HydraAdmin component