質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

解決済

1回答

777閲覧

webpack+react-railsで実装していたReactをesbuildにした時の修正方法

TakagiMarin

総合スコア13

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

0グッド

0クリップ

投稿2023/03/09 11:04

実現したいこと

  • react-railsを使って部分的に読み込んでいるReactを、esbuildに変更した時に正常に読み込めるようにしたい

前提

Rails6、webpacker、react-railsで実装していたシステムをRails7にアップデートすることになり、それに伴いwebpackerからesbuildに変更することになりました。
Reactの知識が乏しく、調べてもreact-railsとesbuildを使用した方法が見つけられませんでした。
よろしくお願いいたします。

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

react-railsを使用して部分的にReactを読み込んでいましたが、
esbuildに変更してからのここの修正方法がわからず詰まっています。

html

1 = react_component('UserSkill', {id: current_user.id})

javascript

1import React, { useState, useEffect, useRef } from "react" 2import axios from "axios" 3 4const UserSkill = (props) => { 5 const id = useState(props.id); 6 const [skills, setSkills] = useState(props.search); 7 8 useEffect(() => { 9 async () => { 10 const result = await axios(`/skills?id=${id}`); 11 setSkills(result.data); 12 } 13 }, []); 14 return ( 15 <> 16 <ul> 17 {skills.map((skill) => { 18 <li key={skill.id}> 19 {skill.name} 20 </li> 21 })} 22 </ul> 23 </> 24 ); 25} 26 27export default Skill

試したこと

package.jsonから読み込む様にしてみましたがダメでした。
reactのファイルはapp/javascript/components下にあります。

"scripts": { "build": "esbuild app/javascript/components/*.* app/javascript/packs/*.* --bundle --sourcemap --target=es2022 --outdir=app/assets/builds --public-path=assets", "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" }

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

Ruby 3.1.0 → 3.1.3
Rails 6.1.6.1 → 7.0.4.2
react-rails 2.6.2
webpacker → esbuild

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TakagiMarin

2023/03/11 04:44

ありがとうございます!Prockfile.devは以下のようになっています。 ``` web: unset PORT && bin/rails server cloudtasker: bundle exec cloudtasker css: yarn build:css --watch js: yarn build --watch ```
guest

回答1

0

自己解決

react-railsはwebpackerでの使用を推奨しているようで、結局esbuildとの併用方法は見つからなかったため、大人しくesbuildで一緒にバンドルしてもらうことにしました。
ちなみにpackage.jsonに書いてもうまくいかなかったと書きましたが、こちらは記述方法が間違っていました。

"scripts": { "build": "esbuild app/javascript/packs/*.* --bundle --sourcemap --target=es2022 --outdir=app/assets/builds --public-path=assets && esbuild app/javascript/components/*.tsx --bundle --sourcemap --target=es2022 --outdir=app/assets/builds --public-path=assets --loader:.js=tsx", "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" }

esbuildの方は「読み込むフォルダ(ファイル)+オプション」までをひと纏りとして &&で区切るようで、sassの方と同じ感覚で「フォルダ名 フォルダ名 ... オプション」としていたのがダメだったみたいです。
上記のように書いたところ正常に読み込まれました。

投稿2023/03/22 10:51

TakagiMarin

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問