Uncaught (in promise) Error: Unable to find module with ID: aurelia-syncfusion-bridge/button/button

[claudiofalzone]

Hello,

I'm following the exact procedure to include Syncfusion as shown in the wiki here but still having the issue :

Error: Unable to find module with ID: aurelia-syncfusion-bridge/button/button

Added the following part in my webpack.js : resolve: { extensions: ['.ts', '.js'], modules: [ 'ClientApp', 'node_modules', path.resolve('./node_modules/syncfusion-javascript/Scripts/ej'), path.resolve('./node_modules/syncfusion-javascript/Scripts/ej/web') ], },

and

new AureliaPlugin({ aureliaApp: 'boot', includeSubModules: [ { moduleId: 'aurelia-syncfusion-bridge' } ] })

My package.json includes the needed aurelia resources :

"aurelia": { "build": { "includeDependencies": "aurelia-*", "resources": [ "aurelia-syncfusion-bridge/button/button", "aurelia-syncfusion-bridge/grid/grid", "aurelia-syncfusion-bridge/grid/column" ] } },

My boot.ts is :

`import 'isomorphic-fetch'; import { Aurelia, PLATFORM } from 'aurelia-framework'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap'; import 'font-awesome/css/font-awesome.css'; import 'css/custom.css';

import * as $ from 'jquery'; window['jQuery'] = $; window['$'] = $;

import 'syncfusion-javascript/scripts/ej/web/ej.button.min'

declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build

export function configure(aurelia: Aurelia) { aurelia.use .standardConfiguration() .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), syncfusion => syncfusion.ejButton()) .plugin(PLATFORM.moduleName('aurelia-api'), config => { config .registerEndpoint('premium', 'http://localhost:61695/api/') .setDefaultEndpoint('premium'); });

if (IS_DEV_BUILD) {
    aurelia.use.developmentLogging();
}

aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/app')));

}`

The vendor webpack has been appended as well with

´ entry: { vendor: [ 'aurelia-event-aggregator', 'aurelia-fetch-client', 'aurelia-framework', 'aurelia-history-browser', 'aurelia-logging-console', 'aurelia-pal-browser', 'aurelia-polyfills', 'aurelia-route-recognizer', 'aurelia-router', 'aurelia-templating-binding', 'aurelia-templating-resources', 'aurelia-templating-router', 'aurelia-api', 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'jquery', 'aurelia-syncfusion-bridge' ]´

Running webpack and webpack for vendor runs well without any errors.

my app.html includes the following require: <require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css"></require>

The issue appears in the browser (Chrome)

17405 Uncaught (in promise) Error: Unable to find module with ID: aurelia-syncfusion-bridge/button/button at WebpackLoader.<anonymous> (app.js:17405) at step (app.js:17254) at Object.next (app.js:17235) at app.js:17229 at Promise (<anonymous>) at 54.__awaiter (app.js:17225) at WebpackLoader.54.WebpackLoader._import (app.js:17370) at WebpackLoader.<anonymous> (app.js:17470) at step (app.js:17254) at Object.next (app.js:17235).

Any advice will be welcome.

Thanks in advance for your help.

fac

[karthickthangasamy]

@claudiofalzone We analyzed about the issue and found that the latest SPA template uses Webpack 2 in which we need to support PLATFORM.moduleName('') to load the bridge source as modules.

Since, we recommend you to replace the existing config-builder.js file from node_modules\aurelia-syncfusion-bridge\dist\commonjs with the below updated config-builder.js.

config-builder.zip

We will do the necessary changes and publish our bridge with updated version at the earliest.

And also we found that, you have imported ejButton from syncfusion-javascript package, which is handled by aurelia-syncfusion-bridge itself. The bridge can be imported into Aurelia application like the below.

aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.ejButton())

[claudiofalzone]

Thanks a lot for your help Karthick,

Unfortunately, this change doesn't resolve the issue.

Cleaning npm cache doen't fix it as well.

I've also tried to change : aurelia-syncfusion-bridge.js with import {PLATFORM } from 'aurelia-framework';

and

ejButton(): EjConfigBuilder { this.resources.push(PLATFORM.moduleName('./button/button')); return this; }

But still the same error...

Any idea ?

Claudio

[karthickthangasamy]

@claudiofalzone I am able to work with the latest SPA template application. Could you please share the simple sample.?

[karthickthangasamy]

@claudiofalzone Could you please try the application from this repo.? I have configured aurelia-syncfusion-bridge and rendered ejButton component.

[claudiofalzone]

@karthickthangasamy First, thanks again for your help. Same error with your repo. So, something wrong with my base setup ?

Will try to clean npm deeper...

What could lead to this behaviour ?

Claudio

[karthickthangasamy]

@claudiofalzone I suspect, you haven't replace config-builder properly or the Aurelia default application is not working with your system environment.

Could you please confirm you have followed the steps from here.?

It would be helpful, if you share simple application to assist you with prompt solution at the earliest.

[claudiofalzone]

@karthickthangasamy I've replaced config-builder.... I ran the procedure twice, the only error I have when running dotnet run is that it doesn't found /dist/vendor-manifest.json.

running webpack against the vendor config file fixed the issue.

Then dotnet run executes successfully, but the "Unable to find module with ID: aurelia-syncfusion-bridge/button/button " is still there at runtime.

The original aurelia spa template is running without any errors.

I will manage to provide my code (but I have to clean it before because it contains paid libraries that I cannot publish)

Claudio

[karthickthangasamy]

@claudiofalzone Thanks for sharing the information. In the latest SPA template, no need to import the aurelia-syncfusion-bridge in package.json. Include it in webpack.vendor.js is enough to generate the application, which I have updated in same wiki page.

Could you please ensure the boot.ts file include plugin same code as mentioned here.? Since, in the last update, you have missed brackets near syncfusion.

I will wait for simple application to resolve the issue as much as earlier.

Thanks, Karthick

[claudiofalzone]

@karthickthangasamy as your repo leads to the same error on my side, please download the full project folder (40Mb) from here This folder is the results after running the procedure.

Is it running on your side ?

Claudio

[claudiofalzone]

@karthickthangasamy Adding brackets near synfusion in boot.ts doesn't resolve the issue. Claudio

[karthickthangasamy]

@claudiofalzone Thanks for sharing the sample. I am able to reproduce the issue and working on it. I will update you at the earliest.

Karthick

[claudiofalzone]

@karthickthangasamy That's great. Many thanks for your time and help :-)

Claudio

[karthickthangasamy]

@claudiofalzone Please do the below changes to resolve the issue.

• Remove aurelia-syncfusion-bridge from webpack.vendor.config.js file.

• Run the below set of commands to generate app.js and vendor.js bundle files.

   node_modules\.bin\webpack --config webpack.vendor.config.js
   node_modules\.bin\webpack

• Please ensure ejButton bridge source and syncfusion-javascript widget source bundled inside app.js and bundled files path from app.map.js.

[claudiofalzone]

@karthickthangasamy It's working !

Thanks for your efficient help. Your're great man :-)

Please go on with your amazing work !

Claudio

[karthickthangasamy]

@claudiofalzone Thanks for your kind words and appreciation.

Please let me know if you need any further assistance and I am glad to assist you.

Thanks, Karthick

[dkent600]

@karthickthangasamy I took a look at your config-builder.js that you provided in a .zip file here.

It uses PLATFORM.moduleName to enable webpack module resolution to work.

What I don't understand is why version 1.0 of aurelia-syncfusion-bridge claims to work with webpack but doesn't include this config-builder.js, and in fact doesn't work with webpack at all?