Develop Reference

Symfony 5 / Encore - Javascript issue

I'm a beginner with Symfony and I just finished my first website.
The website I built is based on Bootstrap and I'm using some jquery for additional js files I made.
I'm having some trouble with Webpack and Encore as neither my Bootstrap JS or jQuery are working.
I'm having no problem with my SCSS and my homemade js are working (except that they don't get jQuery).
What I did :
npm install --save-dev jquery
npm install --save-dev popper.js
npm install --save-dev bootstrap
In my webpack.config.js (Encore) :
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
I tried also with and without
.autoProvidejQuery()
In my app.js
import $ from 'jquery';
global.$ = global.jQuery = $;
import 'bootstrap';
In my base.html.twig
<script src="{{ asset('build/js/app.js') }}"></script>
When everything is fine, I'm finally running in the console
npm run dev
or
npm run build
After that, my js features are not working. On the pages requiring jQuery, I'm having an error in the console.
Uncaught ReferenceError: jQuery is not defined
at bootstrap-datepicker.min.js:7
at bootstrap-datepicker.min.js:7
book:94 Uncaught ReferenceError: $ is not defined
at book:94
I'm a bit lost and I don't know what to try.
If I manually add my js files without using Encore, everything works fine.
Thanks in advance for helping !

with the update encore you need to import the css and the jquery in your js like this
//your css files
import '../css/yourCss.css';
//jquery just the $ sign
const $ = require('jquery');
then you need to make one entry in your webpack config file like
//you have to make it one word like app, ad
.addEntry('ad', './assets/js/ad.js')
for using the js and css in your twig files you need to add the css with this builtin function of encore without the normal link tag just this line
{{ encore_entry_link_tags('ad') }} // ad = the entry name
for using java script you need to use this function
{{ encore_entry_script_tags('ad') }} // ad = the entry name
if you are using vs code i recommende to use this extension https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-extension-pack
with this extension you type just encorecss in your twig file and the extension will auto complete the function for you

Why does my vue application is unable to run successfully with jQuery installed? Looking to import php/mysql backened database in vue

I am quite new to web programming especially vuejs and jquery. First and foremost, I have looked into past similar posts but I am not sure what did I missed out.
I am currently looking to import the backend database from MySQL/PHP into my vuejs.
I have reference to ajax sample coding whereby they utilised jquery. Therefore, I am utilising jquery with vue-axios to import the data into the vue application. Before that, I have installed the jquery into the project directory and under the index.js file I added this portion of code. Besides that, I unable to locate the build/webpack.dev.conf.js inside the project. Before adding this portion of code, everything else in the application works fine.
window.$ = require('jquery')
window.JQuery = require('jquery')
Under the main.js file,
import jQuery from 'jquery'
global.jQuery = require('jquery')
var $ = global.jQuery
window.jQuery = window.$ = $ = jQuery
Furthermore, when I looked for errors (which is under the .vue file), under the vue ui command, where I built the project, it is as if the project doesn't recognize the $(document).ready(function()
Unexpected token, expected "{" (133:15)
131 | }
132 | },
133 | $(document).ready(function() {
I appreciate for the help I can get. Thanks in advance.

How do I globally declare jQuery inside a Vue-CLI 3 project?

I have seen a lot of questions about this on SO and elsewhere, but so far I had no luck.
For a bit of context, I built a SPA website on a Vue project I created with an "old" command. I don't remember which one but it looked like the following:
vue init webpack <my project>
I recently realized that Vue-CLI 3 would be way easier for me to maintain, keep updated and improve for various contextual reasons, so I installed #vue/cli, created a new project and started to copy/paste files from my old project to the new one.
The old project had a build directory with various webpack config files in it, and I needed jQuery set globally for a package I wanted to use, so I added the following to the "base" config of Webpack.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
However, with the new project, all I have now as config file is babel.config.js and vue.config.js at the project's root, there are no build nor config directory.
I tried to set jQuery globally with the following lines inside my main.js file:
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery
But everytime I reload my page, I get the following message:
jQuery is not defined
So, so far, I use the CDN version of jQuery but I don't feel at ease with this solution.
How should I proceed with a Vue-CLI 3 project?
Thank you in advance

You can use Vue plugins. This allows you to add new property to every single component.
In main.js
import Vue from 'vue';
import jQuery from 'jquery';
Vue.use({
install (V) {
V.$jQuery = V.prototype.$jQuery = jQuery
}
})
Then you can use jQuery everywhere in component.
In MyComponent.vue
import Vue from 'vue'
export default {
mounted () {
this.$jQuery('h1').text('Hello World')
Vue.$jQuery('h1').text('Hello World')
}
}
Even another js file.
In util.js
import Vue from 'vue'
Vue.$jQuery('h1').text('Hello World')

You could go on public/index.html and add the script tag to the body with the route to your jquery file or cdn.
If you put it in a jquery folder in public it would look like:
<body>
<div id="app"></div>
<script type="text/javascript" src="/jquery/jquery-3.4.1.min.js"></script>
</body>
I am not sure if that's exactly what you want but it would make it available globally across your project.

If you are using Jquery plugins, you should do this in your main.js:
/*
* If using Jquery plugins they will expect to be available in the global namespace,
* which isn’t the case when you import/require it. So manually assign jquery to
* window. Use require instead of import because the imports are hoisted to the
* top of a file by the compiler, which would break VueJS code.
*/
const $ = require('jquery')
window.jQuery = window.$ = $;

Simditor with webpack

How to compile Simditor with Webpack?
I'm trying to compile Simditor using Laravel Mix, But I'm getting the following error:
Uncaught TypeError: Simditor.connect is not a function
Here is my js file:
window.$ = window.jQuery = require('jquery');
import 'simple-module';
import 'simditor';
$(document).ready(function () {
$('.input.text-editor').each(function () {
var editor = new Simditor({
textarea: $(this).find('textarea')
});
});
});
Any ideia why I'm getting this error?
Editor website: simditor.tower.im

I tried several versions of simditor with webpack installation, one of it worked, after version 2.3.22, JS library directories of simditor and all dependencies become different than previous versions.
Here are my steps:
Install simditor at the version 2.3.22 with webpack(Run yarn add simditor#2.3.22 in Rails 6)
import 'simple-module';
import 'simple-hotkeys';
import 'simple-uploader';
import Simditor from 'simditor';
It works!

I just found it out, that you cannot build that library with webpack, you need to download the library and include the files separately to html.
Tried all, and btw You need to include
mobilecheck.js
jquery.min.js
module.js
hotkeys.js
simditor.js
For this library to work!
I was using Symfony webpack encore.

How to require a js library with dependencies on webpack?

I'm working on a Symfony 3 project and trying to build a skeleton fỏ frontend development. I decided to use webpack encore.
This is my webpack entry file:
// assets/js/app.js
// loads the jquery package from node_modules
var $ = require('jquery');
require('node-waves');
require('popper.js');
require('bootstrap');
require('mdbootstrap');
require('slick-carousel');
require('jquery-validation');
require('jquery-validation-unobtrusive');
require('multi-step-form-js');
$(document).ready(function() {});
The things seem okay if I don't use the "multi-step-form-js". If I require it into the entry file. I will get an error like this in console of Google Chrome "Uncaught TypeError: Cannot read property 'prototype' of undefined". It locates me to this snippet of code inside the libary:
$.validator.prototype.subset = function(container) {
var ok = true;
var self = this;
$(container).find(':input').each(function() {
if (!self.element($(this))) ok = false;
});
return ok;
};
I think the problem is missing of dependence (the "jquery-validation"). I tried to require it with this line of code "require('jquery-validation');". The problem isn't be solved. I guess that webpack use requirejs by by default so I have to find a special way to require it. Unluckily, I'm still finding.
Are there any ideas about how to solve it?
Thanks in advance!

For missing dependencies, you can try installing it manually into your devDependencies with the following.
npm install -D jquery-validation or yarn add -D jquery-validation
Please ensure that the package name is correct. I am just using what you have spelt.