尝试连接 React 和 Java 导致浏览器显示空白页面答案

【问题标题】：Trying to connect React and Java resulted in browser showing a blank page尝试连接 React 和 Java 导致浏览器显示空白页面
【发布时间】：2019-04-04 12:23:33
【问题描述】：

我一直在关注 Spring 的关于一起使用 Boot 和 React 的教程（我对 React 和 JavaScript 的经验有限）：https://spring.io/guides/tutorials/react-and-spring-data-rest/

我已经完成了设置阶段，API 正在工作，java 端可能也在工作，但是 localhost 只返回一个空白页面（React 不会挂钩到 DOM 中的元素）。

我对 webpack 知之甚少。我已逐步按照教程进行操作（但当然可能会出错）。我修改了 pom.xml 并在目标文件夹中看到了节点文件夹。

本教程提到“JavaScript 开发人员通常使用 npm 构建如下所示的 package.json 文件”并附上代码，但没有指定该文件的位置。

我已经创建了这个 package.json，位于项目的根目录中：

{
  "name": "spring_rest_react",
  "version": "0.0.1",
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rest": "^1.3.1"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js 与从教程中复制的以下代码位于同一位置：

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',      
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

我认为我在 webpack 中遗漏了一些东西。教程说它应该被“定义”，但没有具体描述如何或在哪里。

非常感谢指出我正在做的错误。直到现在我一直使用create-react-app，这是我第一次尝试将它连接到Java，我有点迷茫。

【问题讨论】：

您能打开浏览器控制台并在此处发布您收到的错误消息吗？

标签： javascript java reactjs spring-boot

【解决方案1】：

这个问题的出现是因为webpack.config.js的默认设置你可以在下面找到

{YOUR_PROJECT_DIRECTORY}/node_modules/react-scripts/config/webpack.config.js

找到属性const shouldUseRelativeAssetPaths 并更改值

const shouldUseRelativeAssetPaths = publicPath === './'

到

const shouldUseRelativeAssetPaths = publicPath === '.'.

重建您的项目，问题很可能会得到解决。

【讨论】：

【解决方案2】：

他告诉你添加

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
</plugin>

但实际上，如果您查看 github 存档，则有一个父 pom.xml。如果你不使用那个，你真的需要添加

                        <plugin>
                                <groupId>com.github.eirslett</groupId>
                                <artifactId>frontend-maven-plugin</artifactId>
                                <version>1.9.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>v12.14.0</nodeVersion>
                                                        <npmVersion>6.13.4</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>

此外，还有 JavaScript 模块 src/main/js/client.js 和 src/main/js/api/* 您需要从 github 存档中取出。

【讨论】：