)
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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to bundle Syncfusion ReactJS components using webpack and browserify?

Platform: jQuery |
Control: General |
Published Date: March 6, 2017 |
Last Revised Date: May 10, 2019

Using Syncfusion ReactJS application with webpack

To bundle the Syncfusion components into one file using webpack and refer it to your application. Follow the steps below to configure Syncfusion React components with Webpack bundling, 

  1. Create a new application with React and webpack or else we have prepared a demo sample available in the following link, http://www.syncfusion.com/downloads/support/directtrac/172675/ze/Webpack-bundling453315217   
  2. Open command prompt, navigate to the application root folder then install webpack, react by using the below commands.

$ npm install --save-dev webpack  

$ npm install react@15.5.0

$ npm install react-dom@15.5.0

  1. Configure Syncfusion JavaScript components through npm https://help.syncfusion.com/js/installation-and-deployment#configuring-syncfusion-npm-packages. This will fetch Syncfusion dependent files through node. 
  2. Add the required scripts for bundling in “webpack.config.js” entry. You can add required scripts here to bundle it to single script file. 

'use strict';

 

const webpack = require('webpack');

const glob=require('glob');

 

let config = {

  entry: {

    myPages: [

       './node_modules/syncfusion-javascript/Scripts/ej/common/ej.core.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/common/ej.data.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/common/ej.scroller.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/common/ej.touch.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/web/ej.button.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/web/ej.checkbox.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/web/ej.autocomplete.min.js',

       './node_modules/syncfusion-javascript/Scripts/ej/common/ej.web.react.min.js',

       './app/main.js'

    ]

module: {

     loaders: [

       // Javascript: js, jsx

       {

         test: /\.jsx?$/,

         loader: 'babel-loader',

        query: {

          presets: ['es2015', 'react']

        }

       }

    ]

  },

  output: {

    path: './dist',

    filename: 'bundle.js'

  }

};

 

module.exports = config;

 

  1. Now you can create Syncfusion ReactJS components and add it. https://help.syncfusion.com/reactjs/overview   
  2. Run the demo sample to render Syncfusion ReactJS components.

Using Syncfusion ReactJS application with Browserify


To bundle the Syncfusion components into one file using browserify and refer it to your application. Follow the steps below to configure Syncfusion React components with browserify bundling, 

  1. Create an application configuring npm, gulp, react and browserify or get the demo sample available in the link below:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReactJSbrowserify-bundling-2080678114349055693

  1. Open command prompt, navigate to the application root folder then install browserify, gulp using the below commands.

$ npm install browserify

$ npm install gulp 

 

  1. Configure Syncfusion JavaScript components through npm https://help.syncfusion.com/js/installation-and-deployment#configuring-syncfusion-npm-packages
  2. Configure your app for gulp task and bundling with browserify using the “browserify” command. 

var gulp = require('gulp');

var browserify = require('browserify');

var source = require('vinyl-source-stream');

var gutil = require('gulp-util');

 

 

gulp.task("js", function(){

    var destDir = "./dist";

 

    return browserify([

        "./node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js",

        "./node_modules/syncfusion-javascript/Scripts/ej/common/ej.web.react.min.js"

       

    ])

        .bundle()

        .pipe(source("appBundle.js"))

        .pipe(gulp.dest(destDir))

 

});

 

  1. Now you can create Syncfusion React components and add it.

https://help.syncfusion.com/reactjs/overview

  1. Run the demo sample to render Syncfusion ReactJS components using the below command

$ gulp js 

 

 

ADD COMMENT
You must log in to leave a comment
Comments
Bruce Van Horn
Jun 20, 2017
I created a react app using create-react-app.  Once I found I needed to change the webpack config file, I ejected, but I'm struggling with how to add these dependencies.  I added the paths to the existing entry point, but when I launch via npm start, it says it can't find jQuery.  I tried adding the path to jQuery in a similar fashion to what you show above, and I added it before the syncfusion libraries, but that had no effect.  So how do we add all of the dependencies?  Is it just jQuery or are there others? Reply
Selvamani Sankarappan [Syncfusion]
Jun 22, 2017

Hi Bruce,

 

You need to refer the jQuery file in index.html page. Please check the link for dependencies: https://help.syncfusion.com/api/js/global

Click on any particular component. Under “Requires” section, you can view the dependency script files needed by that particular component. 

 

Refer to the following sample with React and Webpack:

http://www.syncfusion.com/downloads/support/directtrac/172675/ze/Webpack-bundling453315217

 

Have you checked the sample provided in this articles? If yes, did you face the same issue with these samples or does the issue occur only in your application. If so, please share the details so that we can help you.   

 

Regards,

Selvamani S.

 

Jonas de Abreu Resenes
Jul 30, 2017

hi Selvamani

I am getting this error: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Grid`

I made the same sample available in your article, the only difference is that I am using a syncfusion Grid 

Do you have an idea what is the problem?


Reply

Please sign in to access our KB

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

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon