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

importing syncfusion-javascript and Registering bridge causes jQuery is not defined.

Hello,

following the aurelia-cli-integration document at https://haurelia-cli-integrationelp.syncfusion.com/aurelia/getting-started/.

I get a ReferenceError: jQuery is not defined. When importing eg resource and  registering the bridge:

error here ... import 'syncfusion-javascript/Scripts/ej/web/ej.web.all.min'; in main.ts

error here ... aurelia.use.plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.useAll());


MY Aurelia app is configured as:
Platform: Web
    Bundler: Webpack
    Loader: None
    Transpiler: TypeScript
    Markup Processor: Minimal Minification
    CSS Processor: Sass
    Unit Test Runner: Karma
    Integration Test Runner: Protractor
    Editor: Visual Studio Code
     AU CLI version is 0.0.1


Here is my aurelia.json snippet
"bundles": {
    "dependencies": [
      "jquery",
      "jquery-validation",
      {
        "name": "aurelia-templating-resources",
        "path": "../node_modules/aurelia-templating-resources/dist/amd",
        "main": "aurelia-templating-resources"
      },
      {
        "name": "aurelia-templating-router",
        "path": "../node_modules/aurelia-templating-router/dist/amd",
        "main": "aurelia-templating-router"
      },
      {
        "name": "aurelia-testing",
        "path": "../node_modules/aurelia-testing/dist/amd",
        "main": "aurelia-testing",
        "env": "dev"
      },
      {
        "name": "aurelia-syncfusion-bridge",
        "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd",
        "main": "index",
        "resources": [
          "**/*.js",
          "common/template.js"
        ]
      },
      {
        "name": "syncfusion-javascript",
        "path": "../node_modules/syncfusion-javascript/",
        "main": false,
        "resources": [
          "Content/ej/web/ej.widgets.core.bootstrap.min.css",
          "Content/ej/web/bootstrap-theme/ej.theme.min.css",
          "Content/ej/web/responsive-css/ej.responsive.css",
          "Scripts/ej/web/ej.web.all.min.js"
        ]
      },
      {
        "name": "jsrender",
        "path": "../node_modules/jsrender/",
        "main": "jsrender"
      }
    ]
  }

3 Replies

CI Christopher Issac Sunder K Syncfusion Team February 5, 2019 05:06 AM

Hi Luai Kamal, 
 
Thanks for contacting Syncfusion Support. 
 
We have analyzed reported issue and the root cause of the issue is jQuery is not bundled in the application. In the Aurelia CLI application, we need to the add the jQuery plugin in webpack.config.js file. Refer to the below code snippet to resolve the issue. 
[webpack.config.js] 
plugins: [ 
    ...when(!karma, new DuplicatePackageCheckerPlugin()), 
    new AureliaPlugin(), 
    new ProvidePlugin({ 
      'Promise': 'bluebird', 
      '$': 'jquery', 
      'jQuery': 'jquery', 
      'window.jQuery': 'jquery' 
  }), 
    new ModuleDependenciesPlugin({ 
      'aurelia-testing': ['./compile-spy', './view-spy'] 
    }), 
    new HtmlWebpackPlugin({ 
      template: 'index.ejs', 
      minify: production ? { 
        removeComments: true, 
        collapseWhitespace: true 
      } : undefined, 
      metadata: { 
        // available in index.ejs // 
        title, server, baseUrl 
      } 
    }), 
 
 
And, to register the aurelia-syncfusion-bridge in main.ts file , refer the below structure. 
[main.ts] 
aurelia.use 
    .standardConfiguration() 
    .feature(PLATFORM.moduleName('resources/index')) 
    .plugin(PLATFORM.moduleName('aurelia-syncfusion-bridge'), (syncfusion) => syncfusion.useAll()); 
 
 
We will update this bridge registration information in our online documentation soon. 
 
We have noticed that you are using the Aurelia CLI version as 0.0.1. But unfortunately, there is no target version in Aurelia. For your convenience we have prepared a simple sample with latest Aurelia Cli with Typescript compiler and attached the sample below. 
 
Please try out our sample and if you are still facing any issues, please revert us back and share your sample with issue.  
 
Thanks,
Christo 



LK LK February 5, 2019 09:32 AM

Thanks!

Adding jQuery in webpack.config.js works.


CI Christopher Issac Sunder K Syncfusion Team February 6, 2019 01:00 AM

Hi Luai Kamal,  

We are glad to hear that the provided information helped you to resolve your issue. Please let us know if you require any further assistance. 

Thanks,
Christo 


Loader.
Live Chat Icon For mobile
Up arrow icon