Uncaught ReferenceError: $ is not defined

[phillharmonic]

I'm using Symfony 4 & Webpack. Installed per instructions and am getting the above error in the browser's console. The following statement is throwing the error:

<script type="text/javascript">

                $( document ).ready( function () { $( "#field_name" ).froalaEditor({

kms_froala_editor.yaml:

kms_froala_editor:
    language: "en"
    toolbarInline: true
    tableColors: [ "#FFFFFF", "#FF0000" ]
    saveParams: { "id" : "myEditorField" }    
    includeJQuery: false
    includeCodeMirror: false
    includeFontAwesome: false
    includeJS: false
    includeCSS: false

My layout.js that includes the required js:

...
'use strict';

import $ from 'jquery';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
import '../css/main.scss';
...

A quick scan of the page shows that all javascript files that are required (jquery & froala) are being included. I suspect it's an issue of "$( document ).ready" being called.

At any rate, at present am unable to use wysiwyg editor. Any help would be appreciated.

[stefanneculai]

@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"
    })
  ]

[phillharmonic]

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.

[phillharmonic]

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

[stefanneculai]

@phillharmonic it looks like there is a problem with Encore: https://github.com/symfony/webpack-encore/issues/52.

[phillharmonic]

@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.

[stefanneculai]

is there any difference if you use includeJQuery: false?

@sguionni any idea where the problem might come from?

[phillharmonic]

No difference is I use includeJQuery: false

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

[sguionni]

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

[phillharmonic]

Console Error:

Uncaught ReferenceError: $ is not defined at edit:360

Line 360:

<script type="text/javascript">

                $( document ).ready( function () 

[sguionni]

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

[phillharmonic]

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

[kevinimbrechts]

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

[phillharmonic]

Not yet, unfortunately.

[kevinimbrechts]

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

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

[phillharmonic]

@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.

[kevinimbrechts]

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

[phillharmonic]

@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

[linehammer]

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 $. Even with $(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

[mradultiw]

$ = 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