rails6にjavascriptを適用させたい

railsにjsを適用させたいのですが、Uncaught Error: Cannot find module '@rails/activestorage'
at webpackMissingModule (application.js:1)というエラーが出てて適用されないです。

ver

Rails 6.1.4.1
application.html.erb

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Futuretodo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
  </head>

  <body>
    <%= render 'layouts/navbar' %>
  <p class="notice"><%= notice %></p>
   <p class="alert"><%= alert %></p>
   
    <%= yield %>
  </body>
</html>

application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import '../javascripts/test'
import '../javascripts/application'

Rails.start()
Turbolinks.start()
ActiveStorage.start()

test.js(適用させたいファイル)

console.log('hello')

やったこと

・jQueryとBootstrapのJavaScriptライブラリを再度インストール
yarn add jquery@3.4.1 bootstrap@3.4.1
・node-sassを削除してバージョン変えてインストール
yarn remove node-sass
yarn add node-sass@4.14.1

m.ts10806

2021/11/07 00:32

ひとまず、test.js以外を削除してミニマム構成を試すところからでは？でないと当該現象が何が原因で起きているか見えてこないと思います。

tamu_daiki

2021/11/07 00:38

m.ts10806さんありがとうございます今、 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>を <%= javascript_pack_tag 'test', 'data-turbolinks-track': 'reload' %> にしたところ反映されましたので、application.jsの読み取りに記述の間違いがあるのだと思います。アドバイスありがとうございます

m.ts10806

2021/11/07 00:59

読み込み順ではないでしょうか。application内の記載順序。機能Aが機能Bを参照しているなら、機能Bの読み込みを先に書く必要があります。