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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is it possible to use ej widgets with webpack

Thread ID:





119657 Jul 18,2015 08:55 PM UTC Jul 18,2016 07:24 AM UTC JavaScript 7
Tags: ejReportViewer
Richard Harding
Asked On July 18, 2015 08:55 PM UTC

Do you have a sample of using syncfusion with webpack module loader 

I have a grid working but when I enable edit functionality I get an error when creating the grid

"Uncaught TypeError: n.templates is not a function"


t.gridFeatures.edit.addEditingTemplate @ ej.web.all.min.js:10

I suspect this is due to webpack not correctly loading dependencies eg jsrender? - when I check in the console jsrender is loaded together with jquery

I'm able to bind the grid to an odata serivce but only with edit capability switched off

Could you give me any ideas on what the issue might be?

Ragavee U S [Syncfusion]
Replied On July 20, 2015 12:23 PM UTC

Hi Richard,

We have analyzed the reported query and we suspect that the cause of the issue may be referring different version of jQuery script file in the same sample.

So please ensure that only one jquery file has been referred in your sample.

If you still face any difficulty, please share the below details with us which will be very helpful for us to assist you accordingly.

1.       If there are any special characters in your dataSource field, then we may get that error on editing. So please the data structure of the dataSource that you have bound to the grid.
2.       Please share the order of the script files that you have referred in your project.
3.       Please share your grid rendering code with us.
4.       Also, please share more and clear details on the files you have loaded using the webpack module loader.

Please get back to us if you need any further assistance.

Ragavee U S

Richard Harding
Replied On July 21, 2015 07:44 AM UTC

Thanks for the response - I suspect this was an issue with loading some of the dependent jQuery plugins - most likely JsRender - I was able to compare with the samples which worked correctly

I then changed the configuration of the webpack bundling to load the pre-req JQuery plugins via the "script-loader" mechanism which worked

Ragavee U S [Syncfusion]
Replied On July 22, 2015 07:05 AM UTC

Hi Richard,

Thanks for the update. 
We are happy that your issue is resolved.
If you have any queries in the future, please get back to us. We will be happy to assist you.

Ragavee U S

Kevin robinson
Replied On July 15, 2016 09:13 AM UTC

Do you have an example of this?

Richard Harding
Replied On July 15, 2016 10:02 AM UTC

Kevin - an example of what  - loading syncfusion assets via script loader?

Its been a while since I looked at this so not sure what you need?

Kevin robinson
Replied On July 15, 2016 12:25 PM UTC

Yes I am trying to use webpack.   webpack runs (and produces the bundle)  OK but I am getting an error.
Here is a link to a sample (supplied by SyncFusion) which I am modifying --  Project






'use strict';
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var webpack = require("webpack");

function absPath(_path) {
    return path.join(__dirname, _path);
var config = {
    context: __dirname,
        entry: "./entry.js",
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: 'http://localhost:3001/app/dist/'
    module: {
        loaders: [
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)(\?v=[0-9].[0-9].[0-9])?$/,
                loader: 'file?name=/fonts/[sha512:hash:base64:7].[ext]',
                exclude: /node_modules\/(?!font-awesome)/
                test: /bootstrap\/js\//,
                loader: 'imports?jQuery=jquery'
                test: /\.css$/,
                loader: 'file?/[sha512:hash:base64:7].[ext]',

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "jQuery.$.fn" : "jquery",
            "window.jQuery": "jquery",
            "root.jQuery": "jquery",

// window.ej = window.Syncfusion = window.Syncfusion || {};
module.exports = config;

bundle.js:14669 TypeError: Cannot read property 'id' of undefined
    at Object._renderPopupPanelWrapper (http://localhost:60360/app/dist/bundle.js:14807:684856)
    at Object._render (http://localhost:60360/app/dist/bundle.js:14807:680184)
    at Object._init (http://localhost:60360/app/dist/bundle.js:14807:673623)
    at Object.<anonymous> (http://localhost:60360/app/dist/bundle.js:14807:14640)
    at jQuery.$.fn.(anonymous function) [as ejDropDownList] (http://localhost:60360/app/dist/bundle.js:15875:26)
    at Object._renderToolBar (http://localhost:60360/app/dist/bundle.js:14807:2715421)
    at Object._renderViewer (http://localhost:60360/app/dist/bundle.js:14807:2733021)
    at Object._init (http://localhost:60360/app/dist/bundle.js:14807:2710213)
    at Object.<anonymous> (http://localhost:60360/app/dist/bundle.js:14807:14640)
    at jQuery.$.fn.(anonymous function) [as ejReportViewer] (http://localhost:60360/app/dist/bundle.js:15875:26) <div id="container" ej-reportviewer="ej-reportviewer" e-reportserviceurl="samplevalue" e-processingmode="mode" e-reportpath="path" style="height:680px" class="e-reportviewer e-js" tabindex="">

Yuvaraj Devarajan [Syncfusion]
Replied On July 18, 2016 07:24 AM UTC

Hi Kevin, 
The shared sample rar file was corrupted and we are getting the below error while extracting the rar file. So please share this file again to validate the reported issue. 
Error Detail: 
Yuvaraj D. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon