Search code examples
javascriptjquerymeteor

Specifing a jQuery version for Meteor twbs:bootstrap

After installing Meteor via Chocolatey on windows 10, and meteor add twbs:bootstrap This Meteor app gives a barowser error

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3

So which version am I running now?

meteor list did not produce any jquery related lines.

./meteor/versions file has a line saying "jquery@1.11.11"

But didn't meteor create already install a jQuery as per the web site? "This package is automatically included in every new Meteor app by meteor create."

DO I need to run meteor add jquery? but I remember doing that already at least once. and "jquery": "^3.5.1" is under dependencies in packages.json and package-lock.json

The command: meteor show jquery shows package: jquery@3.0.0

Please help untangle this. Thanks

Solved:

meteor remove twbs:bootstrap
npm install bootstrap

Added "popper.js":"^1.16.0" to dependencies in package.json

Solution

  • There is a difference between the Meteor package version jquery@3.0.0 and the npm version `"jquery": "^3.5.1".

    The Meteor package jquery@3.0.0 allows to override deprecated jQuery versions (for example delivered as direct dependency of an old Meteor package) with the jQuery version, installed via npm.

    ./meteor/versions file has a line saying "jquery@1.11.11"

    Note, that just adding jquery@3.0.0 sometimes fails (when packages require direct dependencies). Then you have to change in your .meteor/packages the entry jquery@3.0.0 to jquery@3.0.0!

    However, this may still cause the mentioned error, because your jQuery will be a version > 3 (because your project will then use the npm jQuery 3.5.1).

    What are your options then to resolve the error:

    • a) Install npm jquery > 1 and < 3
    • b) Install the latest jQuery and use Bootstrap 4 via npm

    option a

    The first option would basically require you to run meteor npm install --save jquery@2.2.4 to get the latest jQuery < 3.

    This could be a fast solution, if your app will be used internally (for example in a corporate intranet or smth.) but would be a big problem if out in the wild. There are plenty of vulnerabilities that have been detected since 3.5.1 and you should think about, whether this will be an issue or not.

    option b

    The better way is to also use the latest bootstrap an jQuery from the beginning and use their npm packages. It is a bit more of work than just adding twbs:bootstrap but it gives you the flexibility and maintainability that you need:

    1. install the latest npm packages
    $ meteor remove twbs:botstrap
$ meteor npm install --save jquery@latest bootstrap popper.js
    1. edit the Meteor jquery package

    Open .meteor/packages in your editor of choice and change:

    jquery@3.0.0 to jquery@3.0.0!

    1. import the packages

    In your startup routine, for example in client/main.js you do the following:

    import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css' // default theme
import popper from 'popper.js'

global.Popper = global.Popper || popper
    1. (optional) import a custom theme

    If you want to apply your own theme, your may also install the scss toolchain:

    $ meteor remove standard-minifier-css
$ meteor add fourseven:scss seba:minifiers-autoprefixer

    and then import your custom theme instead of the standard css:

    import 'bootstrap'
import popper from 'popper.js'
import './theme.scss'

global.Popper = global.Popper || popper

    to apply your own theme, you need to have theme.scss to follow the structure below:

    /* import the necessary Bootstrap files */
@import "{}/node_modules/bootstrap/scss/functions";
@import "{}/node_modules/bootstrap/scss/variables";
@import "{}/node_modules/bootstrap/scss/mixins/buttons";
/* these are just examples, if your theme overrides more you need to import the respective files */

/* -------begin customization-------- */

/* here your custom theme variables, colors etc. */

/* ------- end customization -------- */

/* finally, import Bootstrap to set the changes! */
@import "{}/node_modules/bootstrap/scss/bootstrap.scss";

    I know this might be too much of an answer but in the long run I highly suggest you to omit the deprecated BS3 and go for a more flexible strategy, as shown in option b here.