Need help solving run-time error involving KendoUI and the Aurelia KendoUI Bridge

Help Requests
1

Hi.

We’ve just introduced the aurelia-kendoui-bridge (and Kendo UI) into an existing application (aurelia v.1) which has been running fine in pre-prod and production until now.

After adding the above module everything runs nicely on the developer’s machines (au run), but when the application is built (with npm run-script --loglevel info "build" -- --env prod) and then deployed (either to IIS locally or to a pre-production server) we get the following error:

datepicker_error
datepicker_error843×595 29.1 KB

We just don’t understand why the browser tries to read the file when it should be part of the bundle.

This is how we refer to Kendo UI in aurelia.json:

          {
           "name": "kendo",
           "path": "../node_modules/@progress/kendo-ui",
           "main": "dummy",
           "resources": [
             "js/kendo.core.js",
             "js/kendo.datepicker.js",
             "js/cultures/kendo.culture.nb-NO.js",
             "css/web/kendo.bootstrap.min.css",
             "css/web/kendo.common-bootstrap.min.css",
             "css/web/kendo.common.min.css"
           ]
          },

dummy.js is an empty file created by me to make the build work.

This is how we reference KendoUI and the bridge in our code.
From main.ts:

import { Aurelia, PLATFORM } from "aurelia-framework"
import environment from "./environment";
import { AureliaConfiguration } from "aurelia-configuration";
import authConfig from "./authConfig";
import 'bootstrap';
import 'whatwg-fetch';
import * as Promise from 'bluebird';
import 'kendo/js/kendo.datepicker';

Promise.config({
  warnings: {
    wForgottenReturn: false
  },
  longStackTraces: false
})

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  let cfgInstance = aurelia.container.get(AureliaConfiguration);
  aurelia.use
         .plugin('aurelia-after-attached-plugin')
         .plugin('aurelia-configuration')
         .plugin('aurelia-api', config => {
            let keys = Object.keys(cfgInstance.getAll());
            keys.forEach(key => {
              config.registerEndpoint(key, cfgInstance.get(`${key}.endpoint`))
            })
          })
         .plugin(PLATFORM.moduleName('aurelia-dialog'))
         .plugin(PLATFORM.moduleName('aurelia-kendoui-bridge'))

From date-picker.ts:

import 'kendo/js/kendo.core';
import 'kendo/js/kendo.datepicker';
import 'kendo/js/cultures/kendo.culture.nb-NO';

We’re at loss as to why we can’t get this to work and with a demo coming up tomorrow, we’re frankly a bit stressed out right now, so any suggestions/pointers/help would be highly appreciated.

TIA

–norgie

2

Hello,

Look at the error:
aurelia-kendoui-bridge/dist/amd/datepicker/datepicker.js

The missing file is not from Kendo UI, but from Aurelia Kendo Bridge.

You can look in aurelia.json for your aurelia-kendoui-bridge dependency.

Good luck!

2 Likes
3

Hi.

That is so embarrassing. Thanks for pointing it out, though. :slight_smile:

dbl_facepalm

1 Like
4

FYI, this is our current set-up (aurelia.json):

            "name": "aurelia-kendoui-bridge",
            "main": "index",
            "path": "../node_modules/aurelia-kendoui-bridge/dist/amd"
          },

I added

"resources": [
    "datepicker/datepicker.js"
]

to the aurelia-kendoui-section above and that did the trick.

2 Likes