FroalaEditor is not defined in rails 6 #105
Description
My html file is:
<h5>Create Campaign</h5>
<div class="divider"></div>
<div class="col s20 m8">
<%= form_with scope: :campaign, url: organization_campaigns_path, local: true do |form| %>
<p>
<%= form.label :title %><br>
<%= form.text_field :title %>
</p>
<p>
<%= form.label :content %><br>
<%= form.text_area :content, :class => "froala-editor", :id => "froala-editor", :rows => 40, :cols => 120 %>
</p>
<p>
<%= form.submit class: 'waves-effect waves-light btn' %>
</p>
<% end %>
</div>
<script>
new FroalaEditor('#froala-editor', {toolbarInline: false})
</script>
My javascript/packs/application.js is
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//= require jquery
// require("materialize")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/help.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_class.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/line_height.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/print.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/special_characters.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
//= require third_party/embedly.min.js
//= require third_party/font_awesome.min.js
//= require third_party/image_tui.min.js
//= require third_party/spell_checker.min.js
My stylesheets/application.scss is:
@import "materialize";
@import "materialize/components/color-variables";
@import "email_clients";
@import "froala_editor.min";
@import "froala_style.min";
@import 'plugins/char_counter.min.css';
@import 'plugins/code_view.min.css';
@import 'plugins/colors.min.css';
@import 'plugins/emoticons.min.css';
@import 'plugins/file.min.css';
@import 'plugins/fullscreen.min.css';
@import 'plugins/help.min.css';
@import 'plugins/image_manager.min.css';
@import 'plugins/image.min.css';
@import 'plugins/line_breaker.min.css';
@import 'plugins/quick_insert.min.css';
@import 'plugins/special_characters.min.css';
@import 'plugins/table.min.css';
@import 'plugins/video.min.css';
@import 'third_party/embedly.min.css';
@import 'third_party/image_tui.min.css';
@import 'third_party/spell_checker.min.css';
@use "@material/theme" with (
$primary: #9c27b0,
$secondary: #76ff03,
$background: #fff,
);
@use "material-components-web";
body {
font-family: 'Raleway', sans-serif;
background: white;
}