CLI Bundling/Dep issue

Help Requests
1

From what I understand. The “deps” in aurelia.json are suppose to be loaded before the entry. I’m having an issue where the datepicker. CLI/Require 0.33.1.

Error

Error: Tempus Dominus Bootstrap4's requires jQuery. jQuery must be included before Tempus Dominus Bootstrap4's JavaScript.
    at defaults.js:19

aurelia.json

"jquery",
{
  "name": "moment",
  "main": "./moment.js",
  "path": "../node_modules/moment",
  "resources": []
},
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.bundle.js",
  "deps": [
    "jquery"
  ],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
},
{
  "name": "tempusdominus-bootstrap-4",
  "path": "../node_modules/tempusdominus-bootstrap-4/build",
  "main": "js/tempusdominus-bootstrap-4.js",
  "deps": [
    "jquery",
    "bootstrap",
    "moment"
  ],
  "resources": [
    "css/tempusdominus-bootstrap-4.css"
  ]
}
2

  1. Ok, easiest solution first.
    Use prepend to load all jquery, moment, popper.js (you missed it), bootstrap, and tempusdominus-bootstrap-4. use copyFiles to get all css files.

  2. The second easiest solution. The best solution in spirit of open source.
    Create a PR to tempusdominus-bootstrap-4, support UMD (AMD, commonjs and globals) instead of rely on global namespace.

  1. The hard way.
    Because the way tempusdominus-bootstrap-4 is wrote, it is executed by browser when loading vendor-bundle, not when you do import 'tempusdominus-bootstrap-4';

To delay the executing to time of importing, edit aurelia.json, add wrapShim config to requirejs.

"loader": {
  "type": "require",
  // ...
  "config": {
    "wrapShim": true
  }
}

But this only solves part of your issue, it now complains

Tempus Dominus Bootstrap4's requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4's JavaScript.

Because as of version 2.10.0, Moment no longer exporting global when require.js is present.

To fight it, manually export moment to global namespace.

In main.js

import environment from './environment';
import 'bootstrap';
import moment from 'moment';
window.moment = moment;
export function configure(aurelia) {

In app.js, (you need to import tempusdominus-bootstrap-4 after main.js to make the global moment available)

import 'tempusdominus-bootstrap-4';
export class App {

In app.html

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.css"></require>
</template>

Last but not least, cleanup your aurelia.json deps.

  • jquery, moment, popper.js, bootstrap all support AMD, get ride of deps and exports.
  • popper.js need some config, because current cli has issue when module name has ‘.js’.
  • tempusdominus-bootstrap-4 needs popper.js too.
         "jquery",
          "moment",
          {
            "name": "popper.js",
            "path": "../node_modules/popper.js/dist/umd",
            "main": "popper.js"
          },
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.bundle.js",
            "resources": [
              "css/bootstrap.css"
            ]
          },
          {
            "name": "tempusdominus-bootstrap-4",
            "path": "../node_modules/tempusdominus-bootstrap-4/build",
            "main": "js/tempusdominus-bootstrap-4.js",
            "deps": [
              "jquery",
              "bootstrap",
              "popper.js",
              "moment"
            ],
            "resources": [
              "css/tempusdominus-bootstrap-4.css"
            ]
          }
1 Like
3

Advertisement

If you try my auto tracing cli with the hard way.

Update your package.json with "aurelia-cli": "huochunpeng/cli#at15".

You still need to go through all the hard way, but you can reduce vendor-bundle dependencies to merely (yes, the whole dependencies array):

"dependencies": [
  "aurelia-bootstrapper",
  "aurelia-loader-default",
  "aurelia-pal-browser",
  "text",
  {
    "name": "aurelia-testing",
    "env": "dev"
  },
  {
    "name": "tempusdominus-bootstrap-4",
    "deps": [
      "jquery",
      "bootstrap",
      "popper.js",
      "moment"
    ]
  }
]

Almost everything is auto traced, including tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.css (notice I removed it from the dep config).

Note: if you don’t reduce your original dependencies, it should still work with auto tracing cli. If not, it’s a bug.

For using any new npm package that supports UMD/AMD/commonjs, you don’t need to touch the aurelia.json ever again.

1 Like
4

This actually answers a few questions I had about all of this. I didn’t even think about it not being UMD (Stupid move for me). I already had popper in prepend. I could try the shim thing and just create the globals for jquery and moment in app.js. I was thinking that I would have to prepend and also load it into a module (duplicating it in my bundle) to get it to work as a global and with stuff I already had written for moment.

import jquery from 'jquery';
window.jQuery = jquery;
import moment from 'moment';
window.moment = moment;

Thanks for such a complete answer. I really appreciate it.

5

I would suggest use prepend before loading requirejs for all of them. It is far easier.
Prepend is one of the flexibility of using requirejs. You don’t have to force them into “module”.

It is easy for requirejs to support import moment from 'moment';.

Use append (this happens after requirejs was loaded).

prepend: [ /* ... */ ],
append: [ 'path/to/globals-to-module.js'],

globals-to-module.js

define('moment', function() {return moment;});