viteとimportmapの競合による期待しないHTTPメソッドの挙動の解消について

# Rails 7 でのログアウト処理問題とその解決策

Railsアプリケーションで以下のようにログアウトリンクを設定している場合、

```erb
<%= link_to 'ログアウト', destroy_user_session_path, data: { turbo_method: :delete } %>
```

次のエラーに直面することがあります。

```bash
ActiveRecord::RecordNotFound at /users/sign_out Couldn't find User with 'id'=sign_out
```

Rails 6 では以下の方法でログアウトリンクを記述していましたが、

```erb
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
```

Rails 7 からは `data: { turbo_method: :delete }` を使用する必要があります
※そうしないとGETメソッドで予期しないリンク先に遷移しようとします。
しかし、この方法でもエラーが発生することがあります。この記事では、その原因解明と解決策を探求します。
#### [補足]簡易な応急策としては以下のものがある
```erb
<%= button_to 'ログアウト', destroy_user_session_path, method: :delete %>
```
※HTTPメソッドの送信方法の不具合や予期しない挙動が解消したわけではないことに注意してください。


## 根本的な問題

プロジェクトの現状は以下の通りです。


```config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to:"turbo.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers", preload: true
```

```app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers/application"
```

```app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    ...
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= vite_client_tag %>
    <%= vite_javascript_tag "entrypoints/application" %>
    <%= javascript_importmap_tags %>
  </head>
  ...
</html>
```

```app/javascript/entrypoints/application.js
console.log('Vite ⚡️ Rails')
console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
import 'vue2-animate/dist/vue2-animate.min.css';
import { createApp } from 'vue';
import ExampleComponent from '../components/ExampleComponent.vue';

const app = createApp(ExampleComponent);
app.mount('#app');
```

この構成において、`<%= vite_javascript_tag "entrypoints/application" %>` をコメントアウトすることで、`importmap`と`vite`の競合が解消され、ログアウトが可能になりましたが、`Vue.js`を`Vite`で管理しているため、このアプローチは適切ではありません。
なお、`importmap`と`vite`の競合で`importmap`の設定が有効にならないのはおそらく`importmap`の後で`vite`(`app/javascript/entrypoints/application.js`)で`Vue`アプリケーションを初期化されているからと思われます（詳細未調査）。

## 解決策

解決策として、`config/importmap.rb`と`app/javascript/application.js`を削除し、Viteのみを使用する構成に変更します。

- **application.html.erb の更新**

    ```application.html.erb
    <!DOCTYPE html>
    <html>
      <head>
        ...
        <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
        <%= vite_client_tag %>
        <%= vite_javascript_tag "entrypoints/application" %>
      </head>
      ...
    </html>
    ```

- **entrypoints/application.js の更新**

    ```entrypoints/application.js
    console.log('Vite ⚡️ Rails')
    console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
    import "@hotwired/turbo-rails"
    import "@hotwired/stimulus"
    import "@hotwired/stimulus-loading"
    import "../controllers/application"

    import 'vue2-animate/dist/vue2-animate.min.css';
    import { createApp } from 'vue';
    import ExampleComponent from '../components/ExampleComponent.vue';

    const app = createApp(ExampleComponent);
    app.mount('#app');
    ```

これにより、Viteを使用しつつ、`@hotwired/turbo-rails` と Stimulus を適切にインポートし、Rails 7のアプリケーションで問題なく動作するようになります。