Skip to content

Uncaught ReferenceError: $ is not defined #66

@phillharmonic

Description

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

Activity

stefanneculai

stefanneculai commented on Aug 2, 2018

@stefanneculai
Contributor

@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

phillharmonic commented on Aug 2, 2018

@phillharmonic
Author

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

phillharmonic commented on Aug 2, 2018

@phillharmonic
Author

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

stefanneculai

stefanneculai commented on Aug 3, 2018

@stefanneculai
Contributor

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

phillharmonic

phillharmonic commented on Aug 3, 2018

@phillharmonic
Author

@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

stefanneculai commented on Aug 6, 2018

@stefanneculai
Contributor

is there any difference if you use includeJQuery: false?

@sguionni any idea where the problem might come from?

phillharmonic

phillharmonic commented on Aug 6, 2018

@phillharmonic
Author

No difference is I use includeJQuery: false

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

sguionni

sguionni commented on Aug 7, 2018

@sguionni
Contributor

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

phillharmonic

phillharmonic commented on Aug 7, 2018

@phillharmonic
Author

Console Error:

Uncaught ReferenceError: $ is not defined at edit:360

Line 360:

<script type="text/javascript">

   			$( document ).ready( function () 
sguionni

sguionni commented on Aug 7, 2018

@sguionni
Contributor

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

phillharmonic

phillharmonic commented on Aug 7, 2018

@phillharmonic
Author

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

kevinimbrechts

kevinimbrechts commented on Aug 13, 2018

@kevinimbrechts

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

phillharmonic

phillharmonic commented on Aug 13, 2018

@phillharmonic
Author

Not yet, unfortunately.

kevinimbrechts

kevinimbrechts commented on Aug 14, 2018

@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

phillharmonic commented on Aug 14, 2018

@phillharmonic
Author

@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

kevinimbrechts commented on Aug 14, 2018

@kevinimbrechts

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

phillharmonic

phillharmonic commented on Aug 20, 2018

@phillharmonic
Author

@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

linehammer commented on Sep 1, 2020

@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

mradultiw commented on May 16, 2021

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @stefanneculai@sguionni@phillharmonic@kevinimbrechts@linehammer

        Issue actions

          Uncaught ReferenceError: $ is not defined · Issue #66 · froala/KMSFroalaEditorBundle