Zenn
🐡

【Rais】Deviseでmethod: :deleteで指定しても、ログアウトがGETメソッドになる

2024/11/14に公開
devise
method
delete
rais
ログアウト
tech

結論：Babel の設定が原因だった

問題のビューのコードはこれ

<% if customer_signed_in? %>
  <%= link_to 'Logout', destroy_customer_session_path, method: :delete %>
<% else %>
  <%= link_to 'Login', new_customer_session_path %>
<% end %>

ログインはできるのに
ログアウトができない…

エラーが

Routing Error
No route matches [GET] "/customers/sign_out"
Rails.root: /home/ec2-user/environment/devise_admin

このように出た・・・

1.babel.config.jsの編集

最初に行ったのはbabel.config.jsの編集で

'@babel/plugin-transform-arrow-functions'

これを追加する

コード全文
babel.config.js
module.exports = function(api) {
 var validEnv = ['development', 'test', 'production']
 var currentEnv = api.env()
 var isDevelopmentEnv = api.env('development')
 var isProductionEnv = api.env('production')
 var isTestEnv = api.env('test')

 if (!validEnv.includes(currentEnv)) {
   throw new Error(
     'Please specify a valid `NODE_ENV` or ' +
       '`BABEL_ENV` environment variables. Valid values are "development", ' +
       '"test", and "production". Instead, received: ' +
       JSON.stringify(currentEnv) +
       '.'
   )
 }

 return {
   presets: [
     isTestEnv && [
       '@babel/preset-env',
       {
         targets: {
           node: 'current'
         }
       }
     ],
     (isProductionEnv || isDevelopmentEnv) && [
       '@babel/preset-env',
       {
         forceAllTransforms: true,
         useBuiltIns: 'entry',
         corejs: 3,
         modules: false,
         exclude: ['transform-typeof-symbol']
       }
     ]
   ].filter(Boolean),
   plugins: [
     'babel-plugin-macros',
     '@babel/plugin-syntax-dynamic-import',
     isTestEnv && 'babel-plugin-dynamic-import-node',
     '@babel/plugin-transform-destructuring',
     [
       '@babel/plugin-proposal-class-properties',
       {
         loose: true
       }
     ],
     [
       '@babel/plugin-proposal-object-rest-spread',
       {
         useBuiltIns: true
       }
     ],
     [
       '@babel/plugin-proposal-private-methods',
       {
         loose: true
       }
     ],
     [
       '@babel/plugin-proposal-private-property-in-object',
       {
         loose: true
       }
     ],
     [
       '@babel/plugin-transform-runtime',
       {
         helpers: false
       }
     ],
     [
       '@babel/plugin-transform-regenerator',
       {
         async: false
       }
     ],
     '@babel/plugin-transform-arrow-functions' // 追加したプラグイン
   ].filter(Boolean)
 }
}

これで
'@babel/plugin-transform-arrow-functions' は、
コードを変換する際にアロー関数を通常の function 式に変換することになる。

一度ここでサーバーを立ち上げて、ログアウトできるか試してみよう

2.@babel/core の追加

次にやったことは
下記のコマンドを打ち込む

yarn add --dev @babel/core

@babel/core は Babel の基本ライブラリで、Babel がトランスパイルを行う際の中核を担います。
プラグインやプリセットが @babel/core を使ってコードを変換するため、
@babel/core がプロジェクトの devDependencies に存在していないと、
プラグインが正しく動作できずエラーが発生することがあります。
@babel/plugin-proposal-private-property-in-object やその他のプラグインが
@babel/core を必要としていたため、
このライブラリをインストールすることで依存関係が解決され、エラーが解消される。

その後に下記のコマンドも打ち込む

yarn add --dev @babel/plugin-transform-private-property-in-object

元々使っていた @babel/plugin-proposal-private-property-in-object は古い提案で、
メンテナンスされていないため、
代わりに @babel/plugin-transform-private-property-in-object を使うことで、
より新しい ECMAScript 標準に準拠したトランスパイルが行われるようになりました。
このプラグインは、private property in object を正しく変換してくれるため、
最新の JavaScript 記述をサポートします。

まぁこっちの方が新しいしいいよって話

ここまでしたら、私の場合はエラーが解決してログアウトできるようになりました

Discussion