実現したいこと
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