We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How do you get aurelia-cli using webpack with babel and electron to work with syncfusion?

I have followed the instructions on https://help.syncfusion.com/aurelia/getting-started/skeleton-esnext-webpack using the latest syncfusion-bridge and syncfusion-javascript

It compiles successfully but I get error:Unable to find module with ID: aurelia-syncfusion-bridge when I try to view the page.
Thanks.

12 Replies

DA dan November 20, 2018 04:24 PM UTC

In addition to using the aurelia-bridge I would also like to know how to get it to work using the javascript method and with electron.  Thanks.  I have researched this via syncfusion, aurelia, stackoverflow and I am still unable to get this working so I just wanted to let you know that I have tried solving this on my own.  I have aurelia and electron working fine I just don't know how to get syncfusion working with aurelia and electron.  I would actually prefer not using the aurelia-bridge method but know both methods would be nice.  Any help would be appreciated.

Thanks,
Dan


CI Christopher Issac Sunder K Syncfusion Team November 21, 2018 12:26 PM UTC

Hi Dan, 

Thank you for contacting Syncfusion support. 

We have analyzed the reported issue and to resolve the issue Unable to find module with ID: aurelia-syncfusion-bridge, We need to use PLATFORM.Modulename to import aurelia-syncfusion-bridge in main.js file. Refer to the below code snippet. 

[main.js] 
. . . 
. . . 
export async function configure(aurelia: Aurelia) { 
  aurelia.use 
    .standardConfiguration() 
    .developmentLogging() 
    .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.ejGrid()); 
 
  // Uncomment the line below to enable animation. 
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css')); 
  // if the css animator is enabled, add swap-order="after" to all router-view elements 
 
  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin. 
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader')); 
 
  await aurelia.start(); 
  await aurelia.setRoot(PLATFORM.moduleName('app')); 
} 
 
 

[app.js] 
 
export class App { 
  router: Router; 
 
  configureRouter(config: RouterConfiguration, router: Router) { 
    config.title = 'Aurelia'; 
    config.map([ 
      { route: ['', 'welcome'], name: 'welcome',      moduleId: PLATFORM.moduleName('./welcome'),      nav: true, title: 'Welcome' }, 
      { route: 'users',         name: 'users',        moduleId: PLATFORM.moduleName('./users'),        nav: true, title: 'Github Users' }, 
      { route: 'child-router',  name: 'child-router', moduleId: PLATFORM.moduleName('./child-router'), nav: true, title: 'Child Router' }, 
        //Add the router configuration for Grid sample here 
      { route: 'grid',          name: 'grid',       moduleId: PLATFORM.moduleName('./samples/grid/grid'), nav: true, title: 'Grid' } 
    ]); 
 
    this.router = router; 
  } 
} 
 
 
 
We have upgraded this content in our UG documentation. Please refer to the below link. 


For your convenience we have prepared a sample and attached below, 


Electron Configuration 
 
We have configured our Syncfusion Components with Typescript skeleton and electron and rendered Grid and Button component. Please refer to the below sample link, 


If you are still facing any configuration issues with Syncfusion Components, please share your sample application which reproduces the issue. 

It will help us to assist you soon to resolve the issue. 

Thanks,
Christo



DA dan November 22, 2018 02:56 AM UTC

Thank you.  Could you provide the Electron Example in js instead of typescript.  Also can you provide an example without using the syncfusion-bridge.

Thanks again your support is excellent.


SI Silambarasan I Syncfusion Team November 22, 2018 07:12 AM UTC

Hi Dan, 
 
Thanks for your feedback. 
 
We have prepared a sample with the electron configuration with basic aurelia esnext(js) skeleton. For your convenience, we have attached the sample below. Please refer it. 
 
To know more about the electron configuration with basic aurelia skeleton, please refer to the below link. 
 
And also, we have integrated our Syncfusion Grid component with esnext and electron. Refer to the below link for sample. 
 
To configure our Syncfusion Components in esnext skeleton, refer our below UG help documentation. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Silambarasan 



DA dan November 22, 2018 05:24 PM UTC

I really appreciate your help and you are going above and beyond but my problem was with Webpack-Aurlia-Syncfusion-Electron using babel not typescript.  I understand that this is not your job to solve this problem particular problem but if you get a chance to provide a working example of the above scenario I would be grateful.  I have spent a lot of time trying to solve this.  I understand if you don't have the time and I really appreciate the examples that you have given.  I have made some progress because of them.

Thanks,
Dan


CI Christopher Issac Sunder K Syncfusion Team November 23, 2018 12:26 PM UTC

Hi Dan, 

Thanks for the update.  

We have followed the basic Aurelia skeleton navigation repository to integrate our Syncfusion Components. Refer to the below link for skeleton repository. 
 
 
We have configured the electron configuration in skeleton-esnext-webpack repository. Refer to the below link for sample. 
 
 
In the same skeleton we have integrated our Syncfusion Grid component and configured with electron. We have ensured this at our end. For your convenience we have attached the sample below. 
 
 
Steps to run the sample: 
 
Extract the sample 
 
npm install 
 
npm start // to run the sample 
 
npm run prod //To generate production build 
 
electron .    // To run the electron 
 
 
Please let us know if you need any further assistance. 

Thanks, 
Christo


DA dan November 23, 2018 04:09 PM UTC

This is perfect.  Thank you very very much.  Have a great day!


DA dan November 23, 2018 08:36 PM UTC

One problem if you delete the dist folder and then rebuild the syncfusion components do not work.


CI Christopher Issac Sunder K Syncfusion Team November 26, 2018 06:06 AM UTC

Hi Dan, 

Thanks for the update. 

We have deleted the dist folder and generated the production build with the below command and Electron is working fine at our end. 

npm run prod 

Refer to the below screenshot. 

 
So please ensure the below details and share some more information about the issues which you are facing. 

  • Please ensure the Syncfusion dependencies(syncfusion-javascript and aurelia-syncfusion-bridge) are installed properly.
  • Ensure the sample is running or not in development mode with below command.

npm run start 

  • Ensure the production build is generated correctly or let us know if you are facing any issues while generating production build.
  • Share the Node and NPM version of your environment.

Thanks,
Christo



DA dan November 28, 2018 06:01 AM UTC

I still cannot get your components to work. Here is my sample project.
1) yarn install
2) npm run prod
3) npm start
4) open new console and run electron .
Aurelia works but when I goto grid, I get an error about Jquery and no syncfusion controls are visible.
I also want to be able to use --watch instead of having to build prod after each file change.
i.e.... webpack --watch

Attachment: skeletonwithsyncfusionelectronwebpack_86aa844.zip


DA dan November 28, 2018 06:55 AM UTC

It is working now.  Not sure what was wrong but I removed jquery then re-added it.  Thanks.


CI Christopher Issac Sunder K Syncfusion Team November 28, 2018 08:55 AM UTC

Hi Dan, 

We are glad to hear that the issue has been resolved at your end. Please let us know if you need any further assistance. 

Thanks,
Christo


Loader.
Live Chat Icon For mobile
Up arrow icon