I'm having trouble using jquery and jquery.keyframes. I use NPM and the js files are stored in the node_modules folder while the html files are stored in the public folder. For some reason the html file cannot find the js files when I use this code:
<script src="../node_modules/jquerykeyframes/dist/jquery.keyframes.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
I've tried a few alternatives but nothing has worked. What am I doing wrong?
You shouldn't be importing your node_modules this way. You can either set a script up with node import/export (or require) or just use the jquery cdn like so (https://code.jquery.com/):
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
And here is the link for jquery keyframes cdn: https://cdnjs.com/libraries/jquerykeyframes
I have a page design (HTML template, CSS, and some jquery on ti) which is pretty legacy and the current task is to make it work with Vue as a first step (we have a plan to override it fully later). Also, it uses Jquery MDB (I know there is a VUE MDB but we plan the move from MDB and it makes no sense to buy the license), so what I want to achieve is to include jquery and MDB to index.html (not like npm dependencies as I just have a local MDB file) and also to have a access to jquery from inside the VUE.
So currently in index.html, I'm including dependencies like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/mdb/mdb.min.css">
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
but when I'm trying to use jquery in VUE for example like this $('.datepicker').pickadate({... I'm getting the error ‘$’ is not defined
What should I do to make external jquery work in/with VUE?
UPDATED
What I did, now I have iin the index.html like this:
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
and as an addition, I also install npm jquery package and including it to the file which needs it like this: import $ from 'jquery' . Now I'm getting different error, B(...)(...).pickadate is not a function and I'm not user what is this B(...)(...) as in code I have $('.datepicker').pickadate({...
Probably it's some conflict as now I have 2 jquery in the page...
Prior to posting this question, I consulted the following threads on this topic:
How to include external CDN link into webpack project
Webpack and external libraries
how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
How to include jQuery CDN in Webpack?
Webpack externals documentation
Based on all the above, it appears that in order to load a third-party library via a CDN, the standard method would be to use webpack externals, which produces the following script tag in the index.html file (per Webpack docs).
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
While this solution works if you have one or two libraries, how are you supposed to load 10 libraries (for arguments sake) via CDNs asynchronously (to maximise pageload performance) using externals in Webpack?
My current solution to this problem is to manually include the following script tags in my index.html file with relevant "async" and "defer" tags; however, I need to update the index.html file in my dist folder every time I include a new library, which leads me to believe I'm doing this completely wrong. Below is what my index.html file currently looks like, which is also replicated in the dist folder.
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/moment#2.20.1/moment.min.js" async defer></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.4/lodash.min.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.0/math.min.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" async defer></script>
<script src="https://widget.cloudinary.com/global/all.js" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" async defer></script>
<script src="/dist/build.js" async defer></script>
</html>
While I'm sure there's a "hack-ey" way of achieving my goal (which I'm open to seeing), my question is whether I can accomplish the above through an officially supported method (like through externals). If not, how does most of the web development world use libraries given that CDNs are known to almost always improve pageload performance?
EDIT: For some context, I'm using Webpack because I'm using vue-loader to build my VueJS SPA (as a learning project).
EDIT 2: This question was asked using incorrect assumptions about Webpack and how web development works. The conclusion is that you shouldn't be using CDNs as liberally as I have if you're using Webpack. Refer to the comment section for clarification.
Suddenly I started to get error when I try to open my dropdown menu :
bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6
I am using standard bootstrap file
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js">
Anything changed in bootstrap I have to take care off?
Order I am loading files is following
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-ui.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
In the introduction of Bootstrap it states which imports you need to add. https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start
You have to add some scripts in order to get bootstrap fully working. It's important that you include them in this exact order. Popper.js is one of them:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Instead of:
js/bootstrap.min.js
use:
js/bootstrap.bundle.min.js
Bootstrap 4 is not yet a mature tool yet. The part of requiring another plugin to work is even more complicated especially for developers who have been using Bootstrap for a while. I have seen many ways to eliminate the error but not all work for everyone. I think the best and cleanest way to work with Bootstrap 4. Among the Bootstrap installation files, There is one with the name "bootstrap.bundle.js"
that already comes with the Popper included.
include popper.js before bootstrap.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
use this link to get popper
In order for Bootstrap Beta to function properly, you must place the scripts in the following order.
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
As pointed out here you must use the script in the UMD subdirectory, in my case
bundles.Add(new ScriptBundle("~/bundles/projectbundle").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/summernote-bs4.js"));
Specifically this: "~/Scripts/umd/popper.js",
You need to install popperjs along with bootstrap to get rid of this error.Note that if you are using "bootstrap": "^4.4.1", and #popperjs/core v2.x combinations,bootstrap may not support popperjs version. So downgrade your version.
Option 1:
npm install popper.js#^1.12.9 --save
and Add following script between jquery and bootstrap scripts.
"node_modules/popper.js/dist/umd/popper.min.js",
Option 2:
Add following script tag to index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script
I had this issue with an MVC project and here is how I fixed it.
Open BundleConfig.cs
Find :
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
Change to:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.bundle.min.js"));
This will set the bundle file to load. It is already in the correct order. You just have to make sure that you are rendering this bundle in your view.
In my case I am using Visual Studio and Nuget packages its failing because have duplicated libraries one in the same folder as jQuery and another in the folder umd. By removing the popper javascript files from the same level as jQuery and refere to the popper.js inside the umd folder fixed my issue and I can see the tooltips correctly.
I was facing this issue, then I put my dropdown in nav tag.
Worked for me that way.
On moving a .html template to a wordpress one, I found this "popper required" popping up regularly :)
Two reasons it happened for me: and the console error can be deceptive:
The error in the console can send you down the wrong path. It MIGHT not be the real issue. First reason for me was the order in which you have set your .js files to load. In html easy, put them in the same order as the theme template. In Wordpress, you need to enqueue them in the right order, but also set a priority if they don't appear in the right order,
Second thing is are the .js files in the header or the footer. Moving them to the footer can solve the issue - it did for me, after a day of trying to debug the issue. Usually doesn't matter, but for a complex page with lots of js libraries, it might!
I had the same error and just wanted to share my solution.
In turned out that the minified version of popper had the code in the same line as the comment and so the entire code was commented out.
I just pressed enter after the actual comment so the code was on a new line and then it worked fine.
I created new project and selected "Angular JS" as project type in webstorm.
Now webstorm has created a project for me like this:
I have added angular.js as a dependent javascript library.
When I open the index.html file, it has below code:
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
The code is referring to angular js files which are present in folder called as bower_components, but the webstorm has not created any such folder automatically. Due to this when I created a file called app1.js and trying to write some angular js code the auto-completion is not working at all.
What is the correct way of creating the projects in webstorm for Angular JS?
Earlier I tried with creating a simple project rather than Angular Js project but still had issue with auto-completion. The details are given in this post : How to create a simple angular js project in webstorm
Update:
Thanks to Daniel, now the issue of bower components is solved. But still the auto-completion is not working when I try to do for code webstorm.controller, please see below screenshot, how can I fix this issue?
Standard Angular methods completion doesn't currently work, please follow WEB-14134 for updates