gulp bundle error when adding toastr

[airboss001]

jspm 0.16.15 gulp 3.9.1 Fresh skeleton 1.1.5 install jspm install jquery jspm install toastr jspm install npm:clean-css --dev

add toastr to bundles.js gulp bundle

throwing this error at bundle step

[09:24:28] 'bundle' errored after 5.75 s [09:24:28] Error: Install Clean CSS via jspm install npm:clean-css --dev for CSS build support. Set System.buildCSS = false to skip CSS builds. at eval (file:///G:/_Aurelia_Beta1/skeleton-full-toastr/jspm_packages/github/systemjs/plugin-css@0.1.20/css-builder.js:95:13) at run (G:_Aurelia_Beta1\skeleton-full-toastr\node_modules\karma\node_modules\core-js\modules\es6.promise.js:84:47) at G:_Aurelia_Beta1\skeleton-full-toastr\node_modules\karma\node_modules\core-js\modules\es6.promise.js:95:28 at flush (G:_Aurelia_Beta1\skeleton-full-toastr\node_modules\karma\node_modules\core-js\modules_microtask.js:19:5) at _combinedTickCallback (node.js:370:9) at process._tickCallback (node.js:401:11)

bundles.js section:

"dist/aurelia": {
  "includes": [
    "aurelia-framework",
    "aurelia-bootstrapper",
    "aurelia-fetch-client",
    "aurelia-router",
    "aurelia-animator-css",
    "aurelia-templating-binding",
    "aurelia-templating-resources",
    "aurelia-templating-router",
    "aurelia-loader-default",
    "aurelia-history-browser",
    "aurelia-logging-console",
    "bootstrap",
    "bootstrap/css/bootstrap.css!text",
    "jquery",
    "toastr"
    "toastr/build/toastr.css!text"
  ],

If I remove "deps ./build/toastr.css!" from the toastr.js file it bundles fine. Or if I add text it works "deps ./build/toastr.css!text"

[brettveenstra]

@airboss001 not sure what's wrong ...

I just pulled latest es2016 skeleton onto a new box (Windows), and did:

• npm install
• jspm install
• add jspm packages

jspm install jquery
jspm install toastr
jspm install npm:clean-css --dev

• modify bundles.json to have

    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text",
        "jquery",
        "toastr",
        "toastr/build/toastr.css!text"
      ],

(please notice the comma after `"toastr" line, yours above is missing it)

• modified welcome.js

import * as toastr from 'toastr';
... (snip)
  submit() {
    this.previousValue = this.fullName;
    toastr.info(`Welcome, ${this.fullName}!`);
  }

• finally bundled and served...

gulp bundle

http-server -o -c-1

If that doesn't work for you, please create a new repository that demonstrates the issue.

[airboss001]

https://github.com/airboss001/Skeleton-ES2016-toastr

Fresh es2016 install from update 2 days ago

npm install jspm install -y jspm install jquery jspm install toastr jspm install npm:clean-css --dev

bundles.js updated with: "dist/aurelia": { "includes": [ "aurelia-framework", "aurelia-bootstrapper", "aurelia-fetch-client", "aurelia-router", "aurelia-animator-css", "aurelia-templating-binding", "aurelia-polyfills", "aurelia-templating-resources", "aurelia-templating-router", "aurelia-loader-default", "aurelia-history-browser", "aurelia-logging-console", "bootstrap", "bootstrap/css/bootstrap.css!text", "jquery", "toastr", "toastr/build/toastr.css!text" ],

welcome.js updated to show toast

import * as toastr from 'toastr'; ... submit() { this.previousValue = this.fullName; toastr.info("title","message"); //alert(Welcome, ${this.fullName}!); }

I had to add toastr.css to main.js for it to be seen by toastr messages to display properly, I put it there since its global to the app. import 'toastr/build/toastr.css!text';

[dilvish4ever]

Same issue with toastr. Same bundle.js, no errors when bundling and page loading. I don't import css in main.js, the question is why toastr object is empty only when minified. When bundled with minify=false all work correct. Origin:

import * as toastr from 'toastr';
import {Logger, Appender} from 'aurelia-logging';

export class ToastrLogAppender implements Appender {
    constructor() { }
    info(logger, message, ...rest) {
        try {
            toastr["success"](message, null, { timeOut: 2000 }).css("width", "800px");
        } catch (ex) {
    }
}

Minified:

        function() {
            var a = System.amdDefine;
            a("resources/toastr-log-appender.js", ["require", "exports", "toastr"], function(a, b, c) {
                "use strict";
                var d = function() {
                    function a() {}
                    return a.prototype.info = function(a, b) {
                        for (var d = [], e = 2; e < arguments.length; e++)
                            d[e - 2] = arguments[e];
                        try {
                            c.success(b, null , {        // !!!!!!!! here c = {}
                                timeOut: 2e3
                            }).css("width", "800px")
                        } catch (f) {}
                    }
                    ,
                    a
                }();
                b.ToastrLogAppender = d
            })
        }(),

[dilvish4ever]

works with config:

//bundles.js
"includes": [
...
"jquery",
"jquery/jquery.min.js",
...
"toastr",
"toastr/build/toastr.min.css!css"
],
            "options": {
                "inject": true,
                "minify": true,
                "depCache": false,
                "rev": true
            }
...

//package.json
"jspm": {
    "dependencies": {
    ...
        "jquery": "npm:jquery@^2.2.3",
    ...
        "toastr": "npm:toastr@^2.1.2"
    },
    "devDependencies": {
        "clean-css": "npm:clean-css@^3.4.12"
     },
    "overrides": {
        "npm:jquery@2.2.3": {
           "directories": {
             "lib": "dist"
           },
           "main": "jquery.min",
              "format": "amd"
           }
      }

[eliavmaman]

+1 i use the es6 plain js skeleton of aurelia, and after bundle all file iget this..

Any ideas?

[eliavmaman]

my config is like: and the bundle.js is :+1: