-
Notifications
You must be signed in to change notification settings - Fork 32
Open
Description
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 commentedon Aug 2, 2018
@phillharmonic please define jQuery globally in your Webpack config so that it can be visible to the editor JS.
phillharmonic commentedon Aug 2, 2018
I use Encore for my webpack.config.js file:
' .autoProvidejQuery()' fixes that issue for modules that expect jQuery to be global; unless I'm not understanding correctly.
Thanks.
phillharmonic commentedon Aug 2, 2018
@stefanneculai not sure why you closed this issue. It has not been resolved.
stefanneculai commentedon Aug 3, 2018
@phillharmonic it looks like there is a problem with Encore: symfony/webpack-encore#52.
phillharmonic commentedon Aug 3, 2018
@stefanneculai: thanks for the reference.
FYI, I did the following in Encore (according to your referenced bug work-around) and the issue persists:
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 commentedon Aug 6, 2018
is there any difference if you use
includeJQuery: false
?@sguionni any idea where the problem might come from?
phillharmonic commentedon Aug 6, 2018
No difference is I use
includeJQuery: false
Thanks for reopening; I really do want to use your editor!
sguionni commentedon Aug 7, 2018
@phillharmonic what's the JS error given by the console ?
phillharmonic commentedon Aug 7, 2018
Console Error:
Line 360:
sguionni commentedon Aug 7, 2018
Do you include your JS files into the head or at the end of the body ?
phillharmonic commentedon Aug 7, 2018
Typically at the end. However, I just switched them all to the head and the error persists.
kevinimbrechts commentedon Aug 13, 2018
I have the same issue. Did you found a solution ?
phillharmonic commentedon Aug 13, 2018
Not yet, unfortunately.
kevinimbrechts commentedon Aug 14, 2018
I just realized that the developers did not put these lines at the top of their app.js.
phillharmonic commentedon Aug 14, 2018
@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 commentedon Aug 14, 2018
Yes it works. The app.js is a custom js file.
I have added this file in webpack.config.js file.
phillharmonic commentedon Aug 20, 2018
@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:
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 commentedon Sep 1, 2020
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:
mradultiw commentedon May 16, 2021
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