React isn't rendering employee list after logging in with manager account

[maldonadojsm]

So I downloaded the repository and I loaded the pom.xml file from the Security directory to build my project. I started the spring boot application, went to localhost:8080, entered username and password (user: greg, pw: turnquist), and then it takes me to the employee page, with only the "hello, greg" and "log out" button appearing on the screen. If you refresh the page you can see that React attempts to render the employee table but then goes blank again, only showing the two aforementioned items on the webpage. This is extremely weird given that the project was directly built from the repository (no tampering in code) and it's definitely not matching the behavior listed in the Spring + React tutorial.

The project was loaded using IntelliJ. I can still access the backend using curl commands, so it's definitely React related.

[maldonadojsm]

Upon further investigation, I've discovered it's related when trying to access the manager's name stored in the employee entity. You get the following error in the browser console:

Uncaught TypeError: Cannot read property 'name' of undefined

I'm a complete novice with React so I don't have any idea how to solve that.

[jpizagno]

I was not able to reproduce this error, or security/ works for me. I cloned the repo (I had a very old version), and started the application by simply doing shell - tut-react-and-spring-data-rest/security$ ./mvnw spring-boot:run

After logging in and refreshing the browser, I can see the employee table. I tried to refresh several times. I also don't see any errors in the Chrome browser console. I see this table:

First Name | Last Name | Description | Manager |   |  
-- | -- | -- | -- | -- | --
Frodo | Baggins | ring bearer | greg | UpdateXUpdate an employeeUpdate | Delete
Bilbo | Baggins | burglar | greg | UpdateXUpdate an employeeUpdate | Delete

When you run the security/ version of the tutorial via the console (using the mvnw command above), what output do you see?

[maldonadojsm]

Thank you for responding promptly. I'm unfortunately running the application through Windows, so I'm unable to try that command out. I've taken a screenshot of the errors that are showing up in the Chrome console. I hope it can point you to the right place.

"name" refers this.props.employee.entity.manager.name which appears in the CreateDialog/UpdateDialog/Employee components. If I comment out all lines associated with this argument/parameter, then Reacts renders the Employee list.

P.S.: I'm building the React app, using the webpack script found in package.json

[henriavo]

@maldonadojsm I'm also getting this same error. And also reproduced it from the code in this repository.

I added a line to log manager.name in the render method before it returns anything and it logs it just fine. So strange. Wish I knew why this is happening 🤔

[matpil]

Hi all, I've the same issue. someone find a solution?

[ndcalabrese]

I can't explain why, but using an incognito window or disabling caching (under network tools) allows the react components to display properly

EDIT: In the pom.xml file, using this code for the maven-frontend plugin fixed it for me:

<plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.12.1</version>
            <configuration>
                <installDirectory>target</installDirectory>
            </configuration>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v16.5.0</nodeVersion>
                        <npmVersion>8.5.5</npmVersion>
                    </configuration>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>webpack build</id>
                    <goals>
                        <goal>webpack</goal>
                    </goals>
                </execution>
            </executions>
</plugin>

[eayin2]

I run into this issue. After deleting my browser cache I could see the Employee table. I suspect that the cache of the previous tutorial builds (basic, conditional, event, ..) caused this issue.