Aurelia plugin loaded from jspm folder even though bundled [SOLVED]

Help Requests
1

I’m using aurelia with jspm and aurelia-bundler.

I am using one aurelia-plugin in my code base, the aurelia-froala-editor, and I noticed today that even though I’ve made the config to include it in one of my bundles, it is actually loaded from the jspm folder…

After running the bundling I get a config.js where everything seems to be generated correctly;

(Made some cut outs [/…/] for brevity)

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: false,
  paths: {
    "npm:*": "jspm/npm/*",
    "github:*": "jspm/github/*",
    "@common/*": "app/common/*"
  },
  map: {
    /.../
    "aurelia-froala-editor": "npm:aurelia-froala-editor@2.9.1",
    /.../
    "npm:aurelia-froala-editor@2.9.1": {
      "aurelia-binding": "npm:aurelia-binding@2.5.2",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.5.2",
      "systemjs/plugin-css": "github:systemjs/plugin-css@0.1.37"
    },
    /.../
  bundles: {
    "dist/libs-a400f4110c.js": [
      /.../
      "npm:aurelia-froala-editor@2.9.1.js",
      "npm:aurelia-froala-editor@2.9.1/froala-editor-config.js",
      "npm:aurelia-froala-editor@2.9.1/index.js",
      /.../
    ],
    "dist/app-d3c7185b05.js": [
      /.../
    ]
  }
});

This is the relevant config for the aurelia-bundler;

var config = {
	force: true,
	baseURL: './wwwroot/',
	configPath: './wwwroot/config.js',
	injectionConfigPath: './wwwroot/dist/config.js',
	bundles: {
		"dist/app": {
			includes: [
				'[./wwwroot/app/**/*.js]',
				'./wwwroot/app/**/*.html!text'
			],
			options: {
				inject: true,
				minify: true,
				rev: true
			}
		},
		"dist/libs": {
			includes: [
				/.../
				'aurelia-froala-editor',
				/.../
			],
			options: {
				inject: true,
				minify: true,
				rev: true
			}
		}
	}
};

And in my main.ts I’m doing;

export function configure(aurelia: Aurelia) {
  /.../
  aurelia.use.plugin('aurelia-froala-editor', config => {
    config.options({ /.../ });
  });
  /.../
}

But when running the app with all this set up, the plugin is still loaded from the jspm-folder;

image

None of my other bundled packages works like this, all them are loaded via the “libs” bundle as expected.

Any help appreciated.

1 Like
2

I would step debug through the loader code to find out why it cannot be loaded from the bundle.
Must be something to do with the fact that froala-editor.js is not in the bundle

2 Likes
3

Yes, I’ve been doing some more digging and when I found https://github.com/aurelia/bundler/issues/17 I really thought I got it by including the plugin in the bundle config like this instead;

		"dist/libs": {
			includes: [
				/.../
	           'aurelia-froala-editor/*.js',
	           'aurelia-froala-editor/**/*.html!text',
				/.../
			],

This generates

      "npm:aurelia-froala-editor@2.9.1/froala-editor-config.js",
      "npm:aurelia-froala-editor@2.9.1/froala-editor.html!github:systemjs/plugin-text@0.0.11.js",
      "npm:aurelia-froala-editor@2.9.1/froala-editor.js",
      "npm:aurelia-froala-editor@2.9.1/index.js",

into the config.js, but now the npm:aurelia-froala-editor@2.9.1.js entry is missing so now that file was loaded from the jspm folder instead.

So i added back also the aurelia-froala-editor line in my bundle config;

		"dist/libs": {
			includes: [
				/.../
	           'aurelia-froala-editor',
	           'aurelia-froala-editor/*.js',
	           'aurelia-froala-editor/**/*.html!text',
				/.../
			],

And now it’s working as expected!

Is this way of bundling plugins documented somewhere else? For this particular plugin there is a html template but no css files. It seems strange that one needs to know this kind of internals about a plugin to know how to bundle it…

Or perhaps the plugin itself is written in a way that complicates bundling?

(I’ll also update the froala support about my findings)

1 Like
4

As far as I remember, this has always been the way of configuring plugins with jspm.

2 Likes