Develop Reference

How to Use jQuery in a inline script when jQuery was imported in a react app?

I've been learning react and have a simple question.
I created an app component which is working well.
I installed jQuery using npm and import jquery in app component import 'jquery/dist/jquery.min.js'
At index.html file I have a script tag injecting a script.js and I'd like to use jQuery in it. But neither $ nor jQuery has been recognized.
What should be done to make it work?

I think your node modules jquery not loading in index.html, you can use jquery by link like
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
or put your jquery code in the related component, there you can easily import your jquery package.
import * as $ from "jquery";

Laravel Mix import JS return errors

Laravel 5.4, NPM 5.8.0
After compile the assets I'm getting this error on every js library that is loaded on before bootstrap.js...
What type of thing I'm missing? I have no modified any core of laravel, Just add the JS libs and compile with npm run dev.

Just missed that app.js load bootstrap and jquery by default, So first, removed the duplicate require that load jQuery
//require('./jobhunt/jquery.min');
Next, Modernizr is loaded on my base layout (welcome.blade.php) on the head.
<script type="text/javascript" src="{{ asset('/js/jobhunt/modernizr.js') }}"></script>
Last, I've detected that my template has deprecated or older versions of jQuery.scrollbar, waypoints, and jQuery counterUp, So I upgraded and now this is the result:
So, I think that is because the theme has old libs and I think that is important leave the bootstrap on top of any require lib. Now my console is clean of errors.

Webpack + Symfony encore - how to add libraries

I am quite new in using webback and encore, so I don't know exactly which is the approach to handle this.
I have a website with a few js files, and it uses jQuery and Bootstrap. I want to create a unique minified js file using webpack.
I've been able to successfully do it following the examples at Symfony website, so I am able to just include one app.js and encore builds the dependencies correctly.
There are some javascript libraries that are not used in my app.js but will be used in some javascript code inlined in the website, like for example the PhotoSwipe.
Currently, I am requiring the PhotoSwipe library inside my main.js file, although this file doesn't use this library.
// Resources/public/js/main.js
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
So, how can I tell encore to add this library into the builded app.js without having to add it in my main.js?
I've tied to add it in webpack.config.json
.addEntry('app', [
'./src/AppBundle/Resources/public/js/main.js',
'photoswipe',
'photoswipe/dist/photoswipe-ui-default'
])
If I check the app.js generated I can see the code has been added to app.js, but when I try in my html code to call Photoswipe I get the error Uncaught ReferenceError: PhotoSwipe is not defined
I guess that this is as the libraries are confined inside the js file, and I should add some kind of export to be accessible, I don't know, as I've said, I am very new in this ;)

This is how I managed my libraries:
// Resources/public/js/myCustomScript.js
const PhotoSwipe = require('photoswipe.js)';
const PhotoSwipeUI_Default = require ('photoswipe/dist/photoswipe-ui-default');
[...] // do PhotoSwipe stuff
And in your webpack.config.json only:
.addEntry('myCustomScript', './src/AppBundle/Resources/public/js/myCustomScript.js')
Then in the templates that needs this script :
<script type="text/javascript" src="{{ asset('build/myCustomScript.js') }}"></script>

Define the order of require in Laravel-mix/Webpack

I'm having trouble with adding Summernote to my NPM. I want to use NPM so that all of the JS and CSS files are in one file. Unfortunately, I have not been able to get Summernote to work when I add it in the Laravel-mix and Webpack. I know it works when I add the script link in my main.blade.php. The problem is that jQuery is always at the end of my app.js file, but I need Summernote to be the last.
webpack.mix.js
mix.js([
'resources/assets/js/app.js',
// I tried to add a new file with only summernote required to get it to be the
// last package to be in the app.js but no luck.
//'resources/assets/js/summernote.js'
], 'public/js');
assets/js/app.js
require('./bootstrap');
// Menu
require('./sidebar.js');
./bootstrap
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
window.$ = window.jQuery = require('jquery');
// Packages
require('bootstrap-sass');
require('owl.carousel');
require('perfect-scrollbar/jquery')(window.$);
require('datatables.net-bs');
require('codemirror');
require('summernote');
require('select2');
// Set some global options for select2
$.fn.select2.defaults.set("theme", "bootstrap");
I know that all the version of jQuery, bootstrap etc are working together so that is not the problem. I just need to get the summernote js code underneath the jquery...

Using laravel mix to include js dependencies

i can't really get my js libraries to work , some time ago i decided to have a separate js file for every library i use (so i have a jquery.js file and a bootstrap.js file included in my layout) ,everything was working just fine until i had to add jquery-ui to this chaos , and got this error
Uncaught TypeError: $(...).slider is not a function
until i loaded ,jquery and jquery-ui in the same file .The problem is i dont want to include jquery ui everywhere i include jquery , beacuse i only use it in 2 pages. Below i will put my code :
jquery-ui.slider.js:
require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');
app.js:
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');
I am using the following npm modules :
bootstrap-sass
jquery
jquery-ui

I ended up by just creating a file where i require jquery,bootstrap.js and then i require this file in a specific file for the two pages...
Below its the code:
app.js
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
page.js
require('./app.js')
require('jquery-ui/ui/widgets/slider');
It seams that now it is working ,even if now i have to include a js file in all the views...Question its still open , i hope somone have a beter idea .

I think laravel-mix only serves the purpose when you have small sites with pages that all include the same app.js & app.css files.
When you have complex portal with multiple pages that have different set of frontend "plugins" you have to split your entries & generate a table of dependencies automatically.
After a lot of time searching I've come to the conclusion that the best approach would be switch to webpack-encore from Symfony.
You can read more about it's capabilities here Webpack Encore Official Documentation.
Now the question is how to embed it to Laravel? It's quite easy, I've just reverse engineered the Symfony's PHP bundle for that and here is the result:
https://github.com/ntpages/laravel-encore
Now you just have to include you're dependency in the page entry and it's all handled automatically.

I think you should load jquery-ui when a condition is met, like:
if (window.loadJQueryUI) {
require('jquery-ui');
}
And you need to initialize loadJQueryUI for the two pages, like this:
<script type="text/javascript">
window.loadJQueryUI = true;
</script>