在 RoR 项目上实施 React答案

【问题标题】：Implementing React on RoR project在 RoR 项目上实施 React
【发布时间】：2020-04-16 19:57:44
【问题描述】：

我正在尝试在 RoR 项目上实施 React。我在我的项目目录中添加了一个前端文件夹并创建了一个组件文件 index.jsx，但是当我使用 Rails 服务器测试它时，它没有显示我使用 React 应用于 Rails 视图的更改。这是我在 Rails 视图中的内容：

<main id="root"></main>

在我的 React 前端文件夹中，我有一个 index.jsx，代码如下：

import React from "react";
import ReactDOM from "react-dom";

document.addEventListener("DOMContentLoaded", () => {
    const root = document.getElementById("root");
    ReactDOM.render(<h1>Welcome to my page</h1>, root);
});

基本上我想要做的只是将一个 h1 标记添加到根元素，但是当我检查页面时，我只看到一个带有 id root 的空主标记。

Screenshot1

不确定这是否有帮助，但这是我的 webpack.config.js

const path = require("path");

module.exports = {
    context: __dirname,
    entry: "./frontend/index.jsx",
    output: {
    path: path.resolve(__dirname, "app", "assets", "javascripts"),
    filename: "bundle.js",
    },
    module: {
    rules: [
        {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
            loader: "babel-loader",
            query: {
            presets: ["@babel/env", "@babel/react"],
            },
        },
        },
    ],
    },
    devtool: "source-map",
    resolve: {
    extensions: [".js", ".jsx", "*"],
    },
};

我试图直接在我的 Rails 视图中添加一些东西，它工作得很好，所以我想我可以假设这是一个前端问题。

<main id="root">
    <h1>Test Rails</h1>
</main>

Screenshot2

这是我加载 html 的视图代码，基本上是任何 rails 新项目的默认代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Intro-Me</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

如果需要任何信息，请告诉我。感谢您对此的任何帮助:)

【问题讨论】：

您能否检查 javascript 控制台中报告的任何错误并将其添加到问题中？
另外，最好在 html 中包含加载资产的视图代码，以及 rails 版本（资产在不同的 rails 版本中处理方式不同）...
@GarrettMotzner 感谢您的回复，错误消息显示 DevTools 无法解析 SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map
@GarrettMotzner 我还添加了带有资产的视图代码
好吧，“未能加载源地图”错误显然隐藏了真正的错误。（源图仅用于调试，一般不会破坏代码）。你能告诉 chrome 忽略 source maps 然后看看错误是什么，或者除了 source map 错误之外还有其他错误吗？

标签： javascript ruby-on-rails reactjs webpack

【解决方案1】：

我想我会回答我自己的问题，问题在我的webpack.config.js 中。我没有意识到 app 文件夹中的目录和文件现在不同了。当我使用 Rails 5.2.4 这个

output: {
    path: path.resolve(__dirname, "app", "assets", "javascripts"),
    filename: "bundle.js",
},

当我在application.html.erb 中有脚本标签时会起作用

<%= javascript_include_tag 'application' %>

，但现在他们将其更改为

<%= javascript_pack_tag 'application' %>

在新版本中，其路由是 /app/javascript/packs 所以现在 webpack.config.js 中的输出应该是

output: {
    path: path.resolve(__dirname, "app", "javascript", "packs"),
    filename: "application.js",
},

这解决了我的问题。

【讨论】：