FroalaEditor is not defined in rails 6

[siddhant-mohan]

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;
}

[siddhant-mohan]

@lebart pls help

[aashishpsaini]

I have been trying to integrate this using webpack and facing the same issue. @stefanneculai If you can look at this that would be really helpful.

[haxlerose]

In javascript/packs/application.js I added these lines to get it to get rid of that error: import FroalaEditor from 'froala-editor/js/froala_editor.min.js'; global.FroalaEditor = FroalaEditor;

I had installed froala-editor with yarn. Also, I added this path: froala-editor/css/ to the froala files imported in application.scss to get it to find them.