@phillharmonic please define jQuery globally in your Webpack config so that it can be visible to the editor JS.

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]

I use Encore for my webpack.config.js file:

var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .createSharedEntry('layout', './assets/js/layout.js')
    .addEntry('login', './assets/js/login.js')
    .enableBuildNotifications()
    .autoProvidejQuery()
    .addPlugin(new CopyWebpackPlugin([
        { from: './assets/static', to: 'static' }
    ]))

    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enableVersioning()
;
module.exports = Encore.getWebpackConfig();

' .autoProvidejQuery()' fixes that issue for modules that expect jQuery to be global; unless I'm not understanding correctly.

Thanks.

@stefanneculai not sure why you closed this issue. It has not been resolved.

@phillharmonic it looks like there is a problem with Encore: symfony/webpack-encore#52.

@stefanneculai: thanks for the reference.

FYI, I did the following in Encore (according to your referenced bug work-around) and the issue persists:

    // .autoProvidejQuery()

    .autoProvideVariables({
        'window.jQuery': 'jquery',
        $: "jquery",
        jQuery: "jquery"
    })

All other jQuery references in my Project work as expected. Just not kms_froala_editor.

Looks like I'll need to source another wysiwyg editor.

Thanks.

is there any difference if you use includeJQuery: false?

@sguionni any idea where the problem might come from?

No difference is I use includeJQuery: false

Thanks for reopening; I really do want to use your editor!

@phillharmonic what's the JS error given by the console ?

Console Error:

Uncaught ReferenceError: $ is not defined at edit:360

Line 360:

<script type="text/javascript">

   			$( document ).ready( function () 

Do you include your JS files into the head or at the end of the body ?

Typically at the end. However, I just switched them all to the head and the error persists.

I have the same issue. Did you found a solution ?

Not yet, unfortunately.

I just realized that the developers did not put these lines at the top of their app.js.

var $ = require("jquery");
window.$ = window.jQuery = $;

@kevinimbrechts : did you get it to work? If so, how exactly? I added those lines to froala_editor.min.js, is that what you mean? I couldn't find an app.js in their plugin.

Yes it works. The app.js is a custom js file.
I have added this file in webpack.config.js file.

@kevinimbrechts : forgive my ignorance. I'm not sure I follow. Did you add the app.js file to your app's webpack.config.js file with:

.addEntry('app.js', './assets/js/app.js')

And then in that app.js file add:

var $ = require("jquery");
window.$ = window.jQuery = $;

If so, I did this and am still unable to get it to work. Also, I am already importing in my webconfig:

import $ from 'jquery';

If you could help sort me out, I'd appreciate it. Thx

Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $.Evenwith$(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.

To solve this error:

Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .

There can be multiple other reasons for this issue:

• Path to jQuery library you included is not correct
• The jQuery library file is corrupted
• Working offline
• Conflict with Other Libraries

$ = require("jquery");
window.$ = window.jQuery = $;

Thanks man, finally found your post 🙏🙏 The issue caused due to this single line gave me a lot of pain... though I hardly find any post at SO or github where they mentioned this...again thanks, you save me from big trouble