# 実現したいこと

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"
      }
    
```

# ツールのバージョン

Ruby 3.1.0 → 3.1.3  
Rails 6.1.6.1 → 7.0.4.2  
react-rails 2.6.2  
webpacker → esbuild
CC BY-SA 4.0
2023-03-09T12:28:37.167
94120
2023-03-22T10:54:46.863
19788
question
ruby-on-rails reactjs
webpackをesbuildに変更した時のreact-railsで実装しているReactの修正方法を教えていただきたいです。
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の方と同じ感覚で「フォルダ名 フォルダ名
... オプション」としていたのがダメだったみたいです。  
上記のように書いたところ正常に読み込まれました。
CC BY-SA 4.0
2023-03-22T10:54:46.863
94274
2023-03-22T10:54:46.863
19788
94120
answer