Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

froala「couldn't find file 'third_party/xxxxxxxx.min.js' with type 'application/javascript'!」

イメージ
Aug 05, 2019

「couldn't find file 'third_party/xxxxxxxx.min.js' with type 'application/javascript'」


ENVIRONMENT


Rails 5.2.1

ruby 2.4.2

wysiwyg-rails 2.6.6

froala-editor-sdk 1.2.0


ERROR


(app/assets/javascripts/application.js)

...
//= require third_party/spell_checker.min.js
//= require third_party/font_awesome.min.js
//= require third_party/embedly.min.js
//= require third_party/image_tui.min.js
...


(app/assets/stylesheets/application.scss)

...
@import 'third_party/embedly.min.css';
@import 'third_party/image_tui.min.css';
@import 'third_party/spell_checker.min.css';
...


SOLUTION


1. update gem wysiwyg-rails version


wysiwyg-rails (2.6.6) -> wysiwyg-rails (2.9.6)


two impotant things

wysiwyg-rails (2.6.6) is not supporting third party except spell_checker.

・version of wysiwyg-rails must not exceed 3.0 because of dependency with froala-editor-sdk.


2. chenge from font-awesome-sass to font-awesome-rails


・add gem 'font-awesome-rails' in Gemfie

・bundle install

・add @import 'font-awesome'; in (app/assets/stylesheets/application.scss)


3. Reboot Rails Server


4. access webpage

you'll confirm alll third party work well !! COOL    




For everyone, I'll share my application.scss and application.js

(app/assets/stylesheets/application.scss)
@import 'font-awesome';
@import 'froala_editor.min.css';
@import 'froala_style.min.css';
@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';


(app/assets/javascripts/application.js)

//= 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_style.min.js
//= require plugins/line_breaker.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 activestorage

//= require third_party/spell_checker.min.js
//= require third_party/font_awesome.min.js
//= require third_party/embedly.min.js
//= require third_party/image_tui.min.js

//= require languages/ja.js



That's all for now!!