Issue
I'm learning to use React and wanted to use it in a SpringBoot application, but I just can't seem to get this working.
I can create a website using Spring-MVC and also execute JavaScript code on it (without React, JSX). But I just can't figure out how to use JavaScript code that uses React.
What I got working so far is...
- A website with a Spring-MVC backend
- Executing javascript code on this website
- Building a jar of the application using maven
- Creating a React project inside my spring project using the create-react-app tool
- Compiling the React code using a maven plugin (following this tutorial) (or at least I think it's working, because maven says that the build is successfull)
- Loading the React js script in the browser
What is not working is...
- Executing the React js script in the browser or debugging the script
The simple React code I want to execute looks like this: test.js
import React from "react";
import ReactDOM from "react-dom";
export default function TestComponent() {
return <div>
<p>Hello There!</p>
</div>;
}
debugger;
ReactDOM.render(<TestComponent />, document.getElementById('hello_there'));
alert("Hello There!");
It should just add some text into the html file to show it's working, but it doesn't. The html (thymeleaf) file looks like this: home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Go Server - JFabricationGames</title>
</head>
<body>
<h1>JFG - Go Server (WIP)</h1>
<img th:src="@{images/welcome.png}" width=500 />
<br>
<a th:href="@{/login}">Login</a>
<div id="hello_there"></div>
<div id="hello_there_2"></div>
<script src="test.js"></script>
<!-- <script src="test_no_react.js"></script> -->
</body>
</html>
And my Spring project looks like this:
and is build using this pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.4.RELEASE</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>
<groupId>net.jfabricationgames</groupId>
<artifactId>go_server_spring</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>go_server_spring</name>
<description>A Go Server</description>
<properties>
<java.version>1.8</java.version>
<frontend-src-dir>${project.basedir}/src/main/app</frontend-src-dir>
<node.version>v12.3.1</node.version>
<yarn.version>v1.16.0</yarn.version>
<frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<configuration>
<nodeVersion>${node.version}</nodeVersion>
<yarnVersion>${yarn.version}</yarnVersion>
<workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
</configuration>
<executions>
<execution>
<id>install-frontend-tools</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
</execution>
<execution>
<id>yarn-install</id>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>build-frontend</id>
<goals>
<goal>yarn</goal>
</goals>
<phase>prepare-package</phase>
<configuration>
<arguments>build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>position-react-build</id>
<goals>
<goal>copy-resources</goal>
</goals>
<phase>prepare-package</phase>
<configuration>
<outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
<resources>
<resource>
<directory>${frontend-src-dir}/build</directory>
<filtering>false</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
If you want to have a look at the full project code you can find it on GitHub: https://github.com/tfassbender/go_server_spring/tree/react_test_2
Now when opening the website in the browser (firefox 72.0.2 (64-Bit)) and using the developer tools I can see that the script was loaded and I can even see the script code:
But what is strange is that I can't seem to debugg the file or even find the file in the debugger...
... although it is loaded and even seems to be executed, because the developer tools show an error in the first line of the script (in the image above).
And what is also kind of strange to me is that the script (test.js) that I can see in the browser (when opening it from the network tab of the developer tools) shows exactly the react code from the test.js file. I would expect it to be compiled to ES5, but I'm very new to React so I don't realy know if this is a problem or an expected behaviour.
So basically the problem is that I can't debugg my javascript/React code and I'm not shure whether I load the correct file or even compiled it correctly (because I'm realy new to React). In fact I have no idea what's going on here and what the problem might be.
So any help would be great.
Solution
The issue here seems to be that you want to run the javascript output by create-react-app on the build, but actually, you're just running a static file test.js which is in the src/main/app/public directory.
This test.js file is not touched by create-react-app at all, so you're right that it's not being compiled to ES5, it's simply being served statically as it is. The error you're seeing in Firefox is exactly because of that - it can't handle the import statements (fixing this directly is a separate issue which I won't get into here, but essentially you won't have this problem with the create-react-app compiled code because it'll be bundled and transpiled to ES5).
Only the code with the entry point at src/main/app/src/index.js will be compiled by create-react-app and indeed it is, and then as per your pom.xml configuration is then copied into target/classes/static/static/{bundle files}.js.
What you want to do is link to those create-react-app generated bundle files, instead of this test.js file. Whatever React code those built bundles contain will run just fine. It's unclear what the role of test.js is here, but to conclude, it's simply not being compiled at all and that's the cause of the error, nothing to do with React per se. You should just delete it and link instead to your create-react-app generated bundles.
Answered By - davnicwil