Action Cableを用いてコメントの削除機能の実装がしたい。

前提・実現したいこと

rails にてアプリケーション実装をしています。

コメントの投稿削除機能をAction cableを用いて実装中です。
現時点で、投稿はwebsocket通信でできている状態です。
削除機能もAction cableを使って行いたいのですが、うまくいきません参考にさせていただいたのが、
https://qiita.com/Hijiri-K/items/13a4e06233d39ef040eb
https://teratail.com/questions/280419
の記事になります。

以下のソースコードにて不要なところ、また足りないところ、修正点などあればご指摘いただきたいです。
また、console上でのエラーも現段階で出ていますので載せておきます。

よろしくお願いいたします。

発生している問題・エラーメッセージ

console
1delete_channel.js:4 Uncaught TypeError: _consumer__WEBPACK_IMPORTED_MODULE_1__.default.subscriptions.create(...) is not a function
2    at Module.<anonymous> (delete_channel.js:4)
3    at Module../app/javascript/channels/delete_channel.js (delete_channel.js:43)
4    at __webpack_require__ (bootstrap:19)
5    at webpackContext (channels sync _channel.js$:10)
6    at Array.forEach (<anonymous>)
7    at Object../app/javascript/channels/index.js (index.js:5)
8    at __webpack_require__ (bootstrap:19)
9    at Object.<anonymous> (application.js:9)
10    at Object../app/javascript/packs/application.js (application.js:23)
11    at __webpack_require__ (bootstrap:19)
12(anonymous) @ delete_channel.js:4
13./app/javascript/channels/delete_channel.js @ delete_channel.js:43
14__webpack_require__ @ bootstrap:19
15webpackContext @ channels sync _channel.js$:10
16./app/javascript/channels/index.js @ index.js:5
17__webpack_require__ @ bootstrap:19
18(anonymous) @ application.js:9
19./app/javascript/packs/application.js @ application.js:23
20__webpack_require__ @ bootstrap:19
21(anonymous) @ bootstrap:83
22(anonymous) @ bootstrap:83

該当のソースコード

comment表示にあたる部分

html
1
2      <div class="comments-all">
3        <ul id="comments">
4          <% if @comments.present? %>
5            <% @comments.reverse_each do |comment| %>
6              <div class="comment-context" id="<%comment.id%>">
7                <li>
8                <% if comment.user.avatar.attached? %>
9          <%= image_tag(comment.user.avatar, class:"avatar-post", id:"avatar-post") %>  
10        <% end %>  
11                <%= link_to comment.user.name, user_path(comment.user.id) %> ： <%= comment.text %></li>
12                <%=link_to(comment_path(comment.id),  method: :delete) do%>
13                <button id="<%=comment.id%>" class="delete-btn">削除</button>
14                <% end %>
15                
16              </div>
17            <% end %>
18          <% else %>
19            <div class="comment-do" id="comment-do">
20              NO COMMENT YET
21            </div>
22          <% end %>
23        </ul>
24      </div>
25

delete.channel.rb

class DeleteChannel < ApplicationCable::Channel
  def subscribed
    stream_from "delete_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def delete
    ActionCable.server.broadcast 'delete_channel', id: data['id']
    comment = Comment.find_by(id: data['id'])
    comment.destroy
  end
end

delete.channel.js

import { removeData } from "jquery";
import consumer from "./consumer"

consumer.subscriptions.create("DeleteChannel", {
  connected() {
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    // Called when there's incoming data on the websocket for this channel
  }
})
  (function() {
    ({
      "delete": function(id) {
        return this.perform('delete', {
          id: id
        });
      }
    });
  
    $(document).on('click', '.delete-btn', function(event) {
      return App["delete"]["delete"](event.target.id);
    });
  
  }).call(this);


  (function() {
    ({
      received: function(data) {
        var id;
        id = "#" + data['id'];
        console.log(id);
        return $(id).remove();
      }
    });
  
  }).call(this);

comment_controller

  def create
    @comment = Comment.new(comment_params)
    @user = @comment.user
    ActionCable.server.broadcast 'comment_channel', content: @comment, user: @user if @comment.save
  end

  def destroy
    if Comment.find(params[:id]).destroy
      ActionCable.server.broadcast 'delete_channel', id: data['id']
    end
  end

ルーティングの設定を変えてみた結果の記述です。↓
（postにネストさせたところにdestroyアクションをおくと
ActiveRecord::RecordNotFound in CommentsController#destroy
のエラーが出てしまったため）


  resources :posts do
    resources :comments, only: :create
  end
  resources :comments, only: :destroy
  mount ActionCable.server => '/cable'
end

補足情報（FW/ツールのバージョンなど）

ruby '2.6.5'
gem 'rails', '~> 6.0.0'
webpacker.ymlの記述も関係あるかわからないのですが載せておきます。


default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true