yellowbear06 commented 1 year ago

質問内容・実現したいこと　turbo_streamを使用してお気に入りボタンを作成していますが、うまく動作しません。　packageでturboを読み込みたいです。
現状発生している問題・エラーメッセージ　data: { turbo_method: :delete}と記載していますが、GETメソッドになってしまいます。　turbo:loadで読み込んでいたjavascriptもうまく発火しません。　javascriptはconsole.logでも表示されません　
どの処理までうまく動いているのか　以前はimportmapを用いてturboを読み込んで動作していました　（importmapだとfly.ioでのデプロイがうまくいかなかったのと、yarn installしているbootstrap-iconとimportmapが混在するとうまくいかなかった。）

該当のソースコード

application.js

//= require jquery3  
//= require popper  
import "@hotwired/turbo-rails";
import "bootstrap";
import "./controllers";

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= page_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= Gon::Base.render_data %>
    <%= javascript_importmap_tags %>
  </head>

package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.3.1",
    "bootstrap-icons": "^1.10.5",
    "esbuild": "^0.18.17",
    "nodemon": "^3.0.1",
    "postcss": "^8.4.27",
    "postcss-cli": "^10.1.0",
    "sass": "^1.64.2"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

エラーから考えられる原因　importmapからesbuildの切り替えがうまくいっていない
試したこと　何度か最初から作り直して、packageを入れ直してみましたがうまく動作しません。　どこかの設定が悪いかもしれません。

Tsuchiya2 commented 1 year ago

複数の要素が含まれてしまっている＆情報が不足しているので精度の低い回答になることをご了承ください。

<%= javascript_importmap_tags %>

こちらの記載からimportmapを使うようになっているかと思いますが、esbuildの見られるので、上記の記載辺りをimportmap使用時とesbuild使用時の違いを確認してみたり、調べてみたりしてみましょう。

例えば、別に新しくimportmapとesbuild使用のアプリケーションをrails newして比較するなど、試行錯誤してみてください。

yellowbear06 commented 1 year ago

ご連絡遅く申し訳ございません。ご回答いただきありがとうございました。承知いたしました。

yellowbear06 / vege_map

turbo, javascriptがうまくいかない #14

application.js

application.html.erb

package.json