React Admin

If you are also running into this error:

[Semantical Error] The class "Symfony Contracts\Service Attribute Required" is not annotated with @Annotation.
Are vou sure this class can be used as annotation?
If so, then you need to add @Annotation to the _class_ doc comment of
"Symfony Contracts Service Attribute Required".
If it is indeed no annotation, then you need to add @IgnoreAnnotation("required") to the _class_ doc comment of method Symfony\Bundle\FrameworkBundle\Controller\AbstractController::setContainer()in<"path":"..VsrcV/Con-troller\" "namespace":" ApplIController") (which is being imported from "/Users/asdf/Projects/code-api-platform/start/config/routes yaml"). Make sure there is a loader supporting the "attribute" type.

removing 'doctrine/annotations' might fix it:

symfony composer remove doctrine/annotations

Thank you for the course!

Hey there!
First of all, thanks for your nice Videos!
Really having fun here :)

Except, when it comes to ReactAdmin...

I tried it two times now with setting up the whole api from scratch (had to downgrade doctrine/orm to 2.18, because apparently 3.00 cant handle ManyToMany Relationsships anymore), BUT

I always get a white screen!

Apparently, react does something, if I inspect my element, this is what it looks like:

<div data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="ReactAdmin" data-symfony--ux-react--react-props-value="{"entrypoint":"\/api"}"></div>

This is my twig template:

{% extends 'base.html.twig' %}
{%  block body %}

    <div {{ react_component('ReactAdmin', {
        entrypoint: path('api_entrypoint')
    }) }}></div>
{% endblock %}

My ReactAdmin:

import React from 'react';

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

export default (props) => (
    <HydraAdmin entrypoint={props.entrypoint} />
);

The only difference was, that I was using @babel/preset-react: 7.0.0 instead of 7.18.6

I tried to update the version, npm install, but still: white screen.

I see a loading circle for a short moment and I can see, that the system made 3 Ajax Requests:
/api
/api/docs.jsonld
/api/contexts/Entrypoint

You got any idea, how I can get it to work?

Thanks and greetings
Maik

Hi Everybody :)
First, I would like to thank you for this superb course.
Everything went good for me, except the last step,

npm install @babel/react-preset@^7.0.0 --save-dev
Didn't work : '@babel/react-preset@7.0.0' is not in this registry,
so I ran :
npm install @babel/preset-react@^7.0.0 --save-dev

Then, when loading the admin page, I got several JS errors/warnings, here are the first two logs :

Uncaught TypeError: theme.palette is undefined
    ToggleThemeLegacyButton ToggleThemeLegacyButton.js:29
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    Webpack 24
ToggleThemeLegacyButton.js:29

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `CustomError`.
CustomError@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:167668:70
ErrorBoundary@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:150223:37
ThemeProvider@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:39597:7
ThemeProvider@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:40191:7
ThemeProvider@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:37703:9
ThemeProvider@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:115418:20
I18nContextProvider@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:94450:14
AdminGuesserWithError@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:165372:241
HydraAdmin@https://127.0.0.1:8000/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_symfony_ux-react_dist-a5cdb8.js:166812:71
__WEBPACK_DEFAULT_EXPORT__@https://127.0.0.1:8000/build/app.js:261:5 react.development.js:209
    React 3
    CustomError Error.js:84
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Asynchrone : EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    Webpack 24

which I couldn't resolve

Any idea ? I am on Symfony 6.2.14 by the way.

Thanks in advance :)

Sadly the Hydra Admin is actually not working in Symfony 7.0.1, i also tested out 6.4 but i had still no luck setting it up there :(

Starting the moment an Entity has been added to the Api Platform (which works on the PHP site well) the Hydra Admin is crashing after loading.

Hey, React Admin is so cool, thanks for introducing it in this amazing course!

I am adopting it now, and I found out that HMR is currently NOT supported for React out of the box. I had to do some research to make it work with Symfony + Webpack Encore + React, and I wanted to share it here to help others save time and efforts.

What you need is React Refresh Webpack Plugin: https://github.com/pmmmwh/react-refresh-webpack-plugin/. Here's how to set it up with Webpack Encore:

# install the plugin; react-refresh is the required peer dependency
npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

Encore
    .enableReactPreset()

    // add react-refresh/babel plugin to Babel configuration
    .configureLoaderRule('javascript', loader => {
        Encore.isDevServer() && loader.use[0].options.plugins.push(require.resolve('react-refresh/babel'));
    })
;

// add React Refresh Webpack Plugin to Webpack configuration
if (Encore.isDevServer()) {
    Encore.addPlugin(new ReactRefreshPlugin());
}

If you use Symfony local webserver with SSL, you also need to enable HTTPS for webpack-dev-server, otherwise you'll see error in the browser's console about refresh plugin not being able to connect to websocket:

Encore.configureDevServerOptions(config => {
    config.server = {
        type: 'https',
        options: {
            pfx: path.join(process.env.HOME, '.symfony5/certs/default.p12')
        }
    }
})

NOTE: this is the setup without Stimulus Bridge.

Hi, i'm user a project with Symfony 6.3.1, all work fine, but in ReactAdmin i have this error on my console :

adminDataProvider.js:27 Uncaught Error: Cannot fetch API documentation:
Unable to find the URL for "https://localhost:8000/api/docs.jsonld#Entrypoint/treasure" in the entrypoint, make sure your API resource has at least one GET collection operation declared.
Have you verified that CORS is correctly configured in your API?

    at adminDataProvider.js:27:1

I found the problem, i added my 2nd ApiResource before the first on my DragonTreasure class. I know now we have to add ApiResource AFTER the first one

#[ApiResource(
    uriTemplate: '/users/{user_id}/treasures{._format}',
    shortName: 'Treasure',
    operations: [
        new GetCollection()
    ],
    uriVariables: [
        'user_id' => new Link(
            fromProperty: 'dragonTreasures',
            fromClass: User::class
        )
    ],
    normalizationContext: [
        'groups' => ['treasure:read']
    ]
)]

Congratulations. One more masterpiece. Keep up excellent work.

Hello!

In my admin panel when I go to create a user it only requires the username but not the password and the email, also when I want to create or modify an object it always gives me the error 422 because one of my assertions jumps without me having touched that field.
Any ideas?

Hello,

How can i fetch owner(data who owner is email from token) data if i use JWT token ?

Regards.
Mmx