2

No matter what I do, I cant seem to get jquery imported before bootstrap wants to use it.

Here is my app.js

// JQuery libary needed for bootstrap
import 'jquery/dist/jquery.min.js';

// Bootstrap libary
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

// Bootstrap-select libary 
import 'bootstrap-select/dist/css/bootstrap-select.css';
import 'bootstrap-select/dist/js/bootstrap-select.js';

// Angular-material standard CSS 
import 'angular-material/angular-material.css';

And here is my package.json

  "dependencies": {
    "@angular/material": "^2.0.0-beta.7",
    "angular": "^1.6.4",
    "angular-material": "^1.1.4",
    "angular-translate": "^2.15.1",
    "angular-translate-storage-cookie": "^2.15.1",
    "angular-translate-storage-local": "^2.15.1",
    "angular-ui-router": "^1.0.3",
    "jquery": "^3.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-select": "^1.12.3",
    "json-loader": "^0.5.4",
    "material-design-icons": "^3.0.1"
  },

But when I run my page it says:

bootstrap.js?f974:8 Uncaught Error: Bootstrap's JavaScript requires jQuery
    at eval (eval at <anonymous> (app.bundle.js:1094), <anonymous>:8:9)
    at Object.<anonymous> (app.bundle.js:1094)
    at __webpack_require__ (app.bundle.js:20)
torbenrudgaard
  • 2,375
  • 7
  • 32
  • 53
  • import * as $ from 'jquery'; Or import * as $ from jquery/dist/jquery.min.js //Just looked into some starter projects, they mostly define it somehow like this. This is no answer just a hint what I found. – Doomenik Jul 11 '17 at 11:22
  • @Doomenik im definately gonna give that a try – torbenrudgaard Jul 11 '17 at 11:46
  • Naaa, same result :-( The only way I can get this to work is if I include it directly in the HTML page - all the others import just fine, its only jquery that is the problem – torbenrudgaard Jul 11 '17 at 11:49
  • I completly forgot to ask, do you use angular cli ? If yes add it in the angular-cli.json under scripts – Doomenik Jul 11 '17 at 12:33
  • I dont think so - I use Angular 1.6 and webpack - so im not sure if that has angular-cli? – torbenrudgaard Jul 11 '17 at 12:36
  • Inside of your package.json you have normaly something like devDependencies, if you use cli it would be in there. Try, also import * as jquery from 'jquery' or import * as jquery from jquery/dist/jquery.min.js (Just to be sure its not based on this" – Doomenik Jul 11 '17 at 12:40
  • Tried all of them, and no I dont use CLI. For now I just `` in the main index.html file - just a bit stupid cause it works fine with all the other script libs. Very strange!! – torbenrudgaard Jul 11 '17 at 13:21
  • Have you confirmed that jQuery is being imported at all? Also I found this in another SO question, not sure if it will help `import {$,jQuery} from 'jquery';` – Lewk Jul 11 '17 at 13:59
  • @Lewk yes it is imported just fine - I tried removing bootstrap js and then calling some jQuery stuff from inside my pages. My best guess here is that even if you import jQuery long before you import bootstrap, it is never "fast enough" – torbenrudgaard Jul 11 '17 at 14:16
  • 1
    eventually this one helps https://stackoverflow.com/questions/39063396/error-bootstraps-javascript-requires-jquery-using-webpack same like https://stackoverflow.com/questions/41778884/webpack-bundle-bootstraps-javascript-requires-jquery – Doomenik Jul 12 '17 at 04:28

0 Answers0