Reactを導入する

[shanbenkazuki]

As Is

（今の状態を記載）

To Be

Reactを使えるようにする

アクション

• [ ] バンドラーをesbuildに変更
• [ ] reactをimport
• [ ] home画面で使えるか試す

課題

（現状分かっている課題を記載）

[shanbenkazuki]

下記がesbuildを後から入れてる

https://kazulog.fun/dev/modern-frontend-development-with-rails-7-react-typescript/

[shanbenkazuki]

gem 'jsbundling-rails'を追記し、bundle

下記実行

bin/rails javascript:install:esbuild

[shanbenkazuki]

エラー発生

         run    npm pkg set scripts.build="esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" from "."
         run    yarn build from "."
yarn run v1.22.19
$ esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets
✘ [ERROR] Could not resolve "@hotwired/turbo-rails"

    app/javascript/application.js:2:7:
      2 │ import "@hotwired/turbo-rails"
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@hotwired/turbo-rails" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "controllers"

    app/javascript/application.js:3:7:
      3 │ import "controllers"
        │        ~~~~~~~~~~~~~
        ╵        "./controllers"

  Use the relative path "./controllers" to reference the file "app/javascript/controllers/index.js".
  Without the leading "./", the path "controllers" is being interpreted as a package path instead.

2 errors
node:child_process:929
    throw err;
    ^

Error: Command failed: /Users/yamamotokazuki/develop/moba-ranking-rails/node_modules/@esbuild/darwin-arm64/bin/esbuild app/javascript/application.js --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets
    at checkExecSyncError (node:child_process:890:11)
    at Object.execFileSync (node:child_process:926:15)
    at Object.<anonymous> (/Users/yamamotokazuki/develop/moba-ranking-rails/node_modules/esbuild/bin/esbuild:219:28)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
    at node:internal/main/run_main_module:28:49 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 92721,
  stdout: null,
  stderr: null
}

Node.js v18.20.2
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
         run  bundle install
Bundle complete! 17 Gemfile dependencies, 77 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

[shanbenkazuki]

エラーの通りyarn add @hotwired/turbo-railsして、application.js修正

[shanbenkazuki]

やっぱ面倒くさいからしない！

[shanbenkazuki]

調査資料一覧

https://kazulog.fun/dev/modern-frontend-development-with-rails-7-react-typescript/ https://www.mof-mof.co.jp/tech-blog/2024/04/22/124028 https://www.mof-mof.co.jp/tech-blog/2024/04/23/182032 https://reinteractive.com/articles/running-react-with-rails-7