Activity

1. openforce-jp commented on Jan 10, 2024

   

   openforce-jp

   on Jan 10, 2024

   More actions

   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

   👎React with 👎1Reacted by Timucin Ünal
2. basti4557 commented on Jan 12, 2024

   

   basti4557

   on Jan 12, 2024

   Author

   More actions

   Thanks @openforce-jp, your solution works fine :) But there should be an official fix anyways i think
3. grichards commented on Jan 27, 2024

   

   grichards

   on Jan 27, 2024

   More actions

   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?
4. grichards commented on Jan 27, 2024

   

   grichards

   on Jan 27, 2024

   Last edited by grichards

   More actions

   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}
   />;
   
5. pomporov commented on Jan 27, 2024

   

   pomporov

   on Jan 27, 2024

   Last edited by pomporov

   More actions

   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)
6. grichards commented on Jan 28, 2024

   

   grichards

   on Jan 28, 2024

   More actions

   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

   👍React with 👍1Reacted by LinkolnIV
7. pomporov commented on Jan 28, 2024

   

   pomporov

   on Jan 28, 2024

   More actions

   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 !!
8. LinkolnIV commented on Feb 4, 2024

   

   LinkolnIV

   on Feb 4, 2024

   More actions

   Thx @grichards ,your description of this problem and solution very help me.
9. AchillesKal commented on Mar 10, 2024

   

   AchillesKal

   on Mar 10, 2024

   More actions

   I am experiencing the same issue on a fresh API platform distribution install.
10. rubobaquero commented on Mar 14, 2024

    

    rubobaquero

    on Mar 14, 2024

    More actions

    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!
11. botjaeger commented on Apr 28, 2024

    

    botjaeger

    on Apr 28, 2024

    More actions

    This does not work with HydraAdmin component