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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bundle Syncfusion ReactJS components using webpack and browserify?

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.
  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. 

 

  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.

 

  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. 

 

  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

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7547 03/06/2017 11/10/2017 JavaScript General
Did you find this information helpful?
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
Add Comment
You must log in to leave a comment

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