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

Question

実現したいこと

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

前提

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

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

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

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

import React, { useState, useEffect, useRef } from "react"
import axios from "axios"

const UserSkill = (props) => {
  const id = useState(props.id);
  const [skills, setSkills] = useState(props.search);

  useEffect(() => {
    async () => {
      const result = await axios(`/skills?id=${id}`);
      setSkills(result.data);
    }
  }, []);
  return (
    <>
      <ul>
        {skills.map((skill) => {
          <li key={skill.id}>
             {skill.name}
          </li>
        })}
      </ul>
    </>
  );
}

export 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

Comments

[yumetodo]

https://ledsun.hatenablog.com/entry/2021/09/08/213752 Procfile.devはありますか・・・？

[TakagiMarin]

ありがとうございます！Prockfile.devは以下のようになっています。

```
web: unset PORT && bin/rails server
cloudtasker: bundle exec cloudtasker
css: yarn build:css --watch
js: yarn build --watch
```

Answer 1

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の方と同じ感覚で「フォルダ名 フォルダ名 ... オプション」としていたのがダメだったみたいです。
上記のように書いたところ正常に読み込まれました。