Aurelia-ux/datepicker 0.18.0 systemjs cli

Help Requests
1

Hi,
I’ve successfully integrated aurelia-ux/0.18.0 into an app built with aurelia-cli using systemjs.
I followed docs and modified
aurelia.json
{
“name”: “@aurelia-ux/core”,
“path”: “…/node_modules/@aurelia-ux/core/dist/amd”,
“main”: “index”,
“resources”: ["/*.{css,html}"]
},
{
“name”: “@aurelia-ux/components”,
“path”: “…/node_modules/@aurelia-ux/components/dist/amd”,
“main”: “index”,
“resources”: ["/.{css,html}"]
},
{
“name”: “@aurelia-ux/input”,
“path”: “…/node_modules/@aurelia-ux/input/dist/amd”,
“main”: “index”,
“resources”: ["**/.{css,html}"]
}

main.js
…
aurelia.use.plugin(’@aurelia-ux/core’)
aurelia.use.plugin(’@aurelia-ux/components’);
aurelia.use.plugin(’@aurelia-ux/icons’);
aurelia.use.plugin(’@aurelia-ux/datepicker’);

when I add to a view I get the following error crashing the app.
ERROR [app-router] TypeError: moment_rexports_1.moment is not a function
error @ aurelia-logging-console.js:51
I think aurelia-ux is coming along nicely and plan to deploy.
Thanks,
John

1 Like
2

@ben-girardet the dist file of aurelia-ux is built with tsconfig without esModuleInterop.
The result is commonjs and amd dist files are wrong in term of re-export moment.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var moment_1 = require("moment");
// tslint:disable-next-line: variable-name
var _moment = moment_1.default;
exports.moment = _moment;
//# sourceMappingURL=moment-rexports.js.map

That var _moment = moment_1.default; assumes moment got esm default export, but moment did NOT.

This esm compatibility issue can be resolved with esModuleInterop in tsconfig.json (for all aurelia-ux packages, not user app).

The other thing should be added is "module": "dist/native-modules/index.js" for all aurelia-ux packages. This will let bundlers (including webpack and cli-bundler) to use the native esm dist files. When esm dist files are in use, user app needs esModuleInterop (only if they use typescript) webpack will normalise esm import similar to babel.

@ben-girardet the installation guide for aurelia-ux on cli is way way outdated. There should be zero config, please just remove that section. https://aux-demo.web.app/getting-started
I will submit 2 PRs to ux and ux-demo.

@johntom although it should work without you touching aurelia.json, but for bypassing current bug, add following to aurelia.json dependencies to force using esm dist files.

{
  "name": "@aurelia-ux/core",
  "path": "../node_modules/@aurelia-ux/core/dist/native-modules",
  "main": "index.js"
},
{
  "name": "@aurelia-ux/datepicker",
  "path": "../node_modules/@aurelia-ux/datepicker/dist/native-modules",
  "main": "index.js"
}
// plus all other ux packages you use
2 Likes
3

Thanks so much for your incredably fast help. You’ve taken away much frustration as I knew it worked and was probably a configuration issue. I’d like to post a repo showcasing ux with systemjs cli and javascrpt and might ask for some help as I get futher down the load

1 Like