1. Home
  2. Forum
  3. Aurelia
  4. Using Syncfusion Javascript from CDN causing "Cannot read property 'helpers' of undefined" error.

Using Syncfusion Javascript from CDN causing "Cannot read property 'helpers' of undefined" error.

I am using Syncfusion, diagrams, grids and other components in my app. Everything was working fine when I was importing the Syncfusion Javascript files in the main.ts


import 'syncfusion-javascript/Scripts/ej/web/ej.web.all.min';

and then 

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'))

    .plugin(PLATFORM.moduleName('aurelia-api'), config => {

      // Register hosts
      config
        .registerEndpoint('api', urlConfig.apiRoute)
        .setDefaultEndpoint('api')
    })

    .plugin(PLATFORM.moduleName('aurelia-authentication'), baseConfig => {
      baseConfig.configure(authConfig);
    })   

    //config.registerEndpoint('other-api', '/otherpath', { headers: { 'Content-Type': 'x-www-form-urlencoded' } });
        
    .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), plugin => plugin.ejGrid().ejDatePicker().ejDiagram().ejOverview().ejTemplate());

  
  //Aurelia fetch client configuration with aurelia-authentication
  const httpClient = aurelia.container.get(HttpClient);
  const authService = aurelia.container.get(AuthService);  
  const accessToken = 'Bearer ' + authService.authentication.accessToken;
  httpClient.configure((config: any) => {
    config
      .withDefaults({
        headers: {
          "Authorization": accessToken
        }
      });
  });

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

But, when building, the app.bundle size becoming very large, more than 40MB. So I decided to move the Syncfusion script to CDN, which will reduce the bundle size to 7MB.

So I removed the import from main.js and added the below CDN in the _Layout.cshtml file



Since then I am having issues while page load and getting below error in console.

"aurelia-task-queue.js?26b6:44 Uncaught TypeError: Cannot read property 'helpers' of undefined"

The pages with date picker work fine if we reload. The grid displays pagination correctly, but data not getting rendered. 

Please help me find what the issue is and how to use the CDN correctly so that I can reduce the app bundle size.



1 Reply
SS Subha Shree Ramanathan Syncfusion Team April 10, 2018 07:06 AM UTC

Hi Ajanth, 

Thanks for contacting Syncfusion support. 

The issue ‘Cannot read property helpers of undefined’ is occurred due to dependency file ‘jsrender’ is not referred properly. To resolve this issue, please refer the below. 

Using CDN Link 

If you are using CDN link to refer the scripts files, we need to refer the dependent packages also. So we suggest you to refer the below links to refer the jsrender, jquery script files as like below to resolve the issue. 



Also, we found that you are using older version of ej.web.all.min.js file, since we recommend you to refer the latest ej.web.all.min.js file from the below link.  

 
Refer to the below user documentation link for more information. 


Using NPM Package 

When we installing syncfusion-javascript NPM package, it will install the required dependency packages of jquery, jsrender, jquery-validation.  So when we referring script files from NPM package, the dependency packages are traced and bundled into application. 

Please let us know if you need further assistance on this. 

Thanks, 
Subha Shree D.R 


Loader.
Up arrow icon