Develop Reference

Javascript files does not load in React

I included my external Javascript files in my index.html file, and for whatever reason it doesn't load, and no error is thrown.
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>

I used the react-script-tag library.
I created a component that used the react-script-tag to include all the js files, and imported them in other components that needs them.

Metafizzy Isotope Uncaught TypeError

I am using Laravel for a project, with Laravel Mix compiling my JS and SCSS.
On one of the pages I have a portfolio filter, I want to use Metafizzy's Isotope as it has worked perfect in previous projects.
I included jQuery, followed by the isotope package locally, and finally my main.js file, all of which are before the closing body tag.
I'm using the exact same javascript code from this Codepen Demo in my main.js file: https://codepen.io/desandro/pen/JEojz
However I get the following error in my console:
Uncaught TypeError: $(...).isotope is not a function
I have tried placing my main.js file before and after the isotope package:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
I have also tried installing via npm and adding the following to my main.js file:
var Isotope = require('isotope-layout');
No matter what I do, I get the same error and I'm not sure how to get this working with my Laravel project. Any help would be appreciated.

Looks like I forgot to wrap it in $(document).ready(function() {...})

How to load a javascript module in html

I receive an error whenever I import a library in my index.js file and try to use it in index.html file.
script tag in index.html:
<script src="index.js" type="module"></script>
import statement in index.js: import axios from './node_modules/axios';
The error I receive:
*I am running the app on a local server, not on the file system.

if you use just vanilla JavaScript and you want to use module you have to add in script tag type module for index.js by this way you tell browser you have to support module in index.js, and after you use module normally with exception you have to add extension name like ".js" for each import Good Luck
<script type="module" src="main.js"></script>

You need to provide the URL to an ES6 module file, not the URL to an automatically generated HTML document showing an index of files in the axios directory.
The Axios distribution includes:
node_modules/axios/dist/axios.min.js
… but that appears to be a hybrid "Load with a regular script tag in the browser" and CommonJS module — not an ES6 module, so you can't import it.
Consider using a tool like Webpack instead.

You can use CDN instead of that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
Thank you

Why do I get undefined JS with Laravel?

I'm using Laravel and in my bootstrap.js file I have
window.ProgressBar = require('progressbar.js');
and then I require the bootstrap.js file into app.js
require('./bootstrap');
And I use webpack.mix.js to compile it
mix.js('resources/assets/js/app.js', 'public/js')
If I attempt to access progressbar.js inside of app.js it works perfectly.
However, If I attempt to use it outside of app.js in script tag that comes after app.js on my pages, ProgressBar is undefined.
How can I access ProgressBar outside of my app.js but keep it imported via app.js ?
Example on index.blade.php
<script src="app.js" defer></script>
<script>
const progress = new ProgressBar; //undefined...
</script>

I had defer on the script tag and for some reason that stopped it from working.
Solution:
<script src="app.js" defer></script>
change to
<script src="app.js"></script>

I think, that Webpack hides ProgressBar from you, even if you have ProgressBar assigned to the window. Because you know, Webpack thinks that the bundle has all the code of your app. Solution? Not to bundle it! Instead use minified version of ProgressBar and just load it like in good old times. It is perfectly OK, few nanoseconds better or worse, not noticeable.

Netbeans JSF when adding css or javascript error

I import my css file and javascript files in index.xhtml
<script type="text/javascript" src="resource/js/bag.js"></script>
My project works like this in http://localhost:8084/Proje1/ . But when i open http://localhost:8084/Proje1/faces/index.xhtml this url, doesn't work. It doesn't find css file and jquery files. How can i fix this. Thank you.

Place your resource folder under WebContent, and replace your <script> import with this:
<script src="#{request.contextPath}/resource/js/bag.js"></script>