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

basti4557 commented 8 months ago

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 commented 7 months ago

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 commented 7 months ago

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

grichards commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

grichards commented 7 months ago

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 commented 7 months ago

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 !!