header ads

railsでreactのエントリーポイントのコンポーネントをレンダリングさせると「Webpacker::Manifest::MissingEntryError 」が表示される

6月 04, 2023

実現したいこと

・エントリーポイントとして「index.tsx」を「app/views/layouts/application.html.erb」に組み込んでビュー（app/views/home/top.html.erb）の「id = "root"」の要素にレンダリングしたい

前提

railsとreactとtypescriptで社員の情報（残業代や残有給数など）を表示、編集できるアプリを作っています。
現在の残業時間や残業代を表示、編集できるページを「index.tsx」にてコンポーネントを組み合わせて共通のビュー「app/views/layouts/application.html.erb」のheadタグに「<%= javascript_pack_tag 'index' %>」を挿入して「rails s」でサーバーを起動させたら以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Webpacker::Manifest::MissingEntryError in Overtime#administration

エラーメッセージ
Showing /Users/kamiwataritakeru/Ruby/paidHoliday/app/views/layouts/application.html.erb where line #12 raised:

Webpacker can't find index.js in /Users/kamiwataritakeru/Ruby/paidHoliday/public/packs/manifest.json. Possible causes:

  1. You want to set webpacker.yml value of compile to true for your environment
    unless you are using the webpack -w or the webpack-dev-server.
  2. webpack has not yet re-run to reflect updates.
  3. You have misconfigured Webpacker's config/webpacker.yml file.
  4. Your webpack configuration is not creating a manifest.

該当のソースコード

application.html.erb

<!DOCTYPE html> <html> <head> <title>PaidHoliday</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> <%= javascript_pack_tag 'application' %> <%= javascript_pack_tag 'index' %> <% if request.path != '/users/sign_in'%> <% if user_signed_in? %> <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %> <% else %> <%= link_to 'ログイン', new_user_session_path %> <% end %> <% end %> </head> <body> <%= yield %> </body> </html>

top.html.erb

<div id = "root"></div>

index.tsx

import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import Employees from "./Employees"; import ForEmp from "./ForEmp"; import { Route, BrowserRouter } from "react-router-dom"; ReactDOM.render( <React.StrictMode> <BrowserRouter> <div> <Route path="overtime/administration" Component={Employees} /> <Route path="/overtime/forEmp" Component={() => <ForEmp overtime={1} monthlySalary={2} hourlySalary={3} />} /> </div> </BrowserRouter> </React.StrictMode>, document.getElementById("root") );

manifest.json

{ "application.js": "/packs/js/application-eb88f6b6b967261aa0b3.js", "application.js.map": "/packs/js/application-eb88f6b6b967261aa0b3.js.map", "entrypoints": { "application": { "js": [ "/packs/js/application-eb88f6b6b967261aa0b3.js" ], "js.map": [ "/packs/js/application-eb88f6b6b967261aa0b3.js.map" ] }, "hello_react": { "js": [ "/packs/js/hello_react-121b848b2224cf30c500.js" ], "js.map": [ "/packs/js/hello_react-121b848b2224cf30c500.js.map" ] }, "hello_typescript": { "js": [ "/packs/js/hello_typescript-736830131a936b0890a3.js" ], "js.map": [ "/packs/js/hello_typescript-736830131a936b0890a3.js.map" ] }, "server_rendering": { "js": [ "/packs/js/server_rendering-445dc9f502aa85b950b4.js" ], "js.map": [ "/packs/js/server_rendering-445dc9f502aa85b950b4.js.map" ] } }, "hello_react.js": "/packs/js/hello_react-121b848b2224cf30c500.js", "hello_react.js.map": "/packs/js/hello_react-121b848b2224cf30c500.js.map", "hello_typescript.js": "/packs/js/hello_typescript-736830131a936b0890a3.js", "hello_typescript.js.map": "/packs/js/hello_typescript-736830131a936b0890a3.js.map", "server_rendering.js": "/packs/js/server_rendering-445dc9f502aa85b950b4.js", "server_rendering.js.map": "/packs/js/server_rendering-445dc9f502aa85b950b4.js.map" }

package.json

{ "license": "UNLICENSED", "dependencies": { "@babel/core": "^7.0.0", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.5", "@rails/webpacker": "5.4.4", "@types/react": "^18.2.7", "@types/react-dom": "^18.2.4", "@types/react-router-dom": "^5.3.3", "axios": "^1.4.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "prop-types": "^15.8.1", "react": "^18.2.0", "react_ujs": "^2.7.1", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2", "typescript": "^5.0.4" }, "devDependencies": { "@webpack-cli/init": "^1.1.3", "webpack": "^5.85.0", "webpack-cli": "^5.1.2", "webpack-dev-server": "^3" }, "scripts": { "build": "webpack --config webpack.config.js" } }

試したこと

個人的に「manifest.json」に「index.tsx」がエントリーポイントとして設定されていないため、「<%= javascript_pack_tag 'index' %>」で「index.tsx」が見つからなかったのが原因だと考え、「index.tsx」を以下のようにエントリーポイントとして設定しようと考えたのですが、ハッシュ値が分かりませんでした。

"index": {
"js": [
"/packs/js/application-XXXXXXXXXXXXXXXX.js"
],
"js.map": [
"/packs/js/application-XXXXXXXXXXXXXXXX.js.map"
]

補足情報（FW/ツールのバージョンなど）

とりあえずコンポーネントがビューにレンダリングされることを確かめるために実装している段階です。

hsmw

hsmw

コメントを投稿

0 コメント