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
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 import the Syncfusion ReactJS components using webpack?

Platform: jQuery |
Control: General


To import the dependent scripts for the specific ReactJS component into the JSX file. Follow the below steps to configure the Syncfusion React components.

1) Create a new application with React using the following link:

https://help.syncfusion.com/reactjs/overview#getting-started-with react


2) Open the command prompt and navigate to the application root folder then install webpack, react by using the below commands.

$ npm install --save-dev webpack  
$ npm install react 
$ npm install react-dom 
$ npm install --save-dev babel-preset-es2015 
$ npm install babel-loader babel-core babel-preset-env    webpack --save-dev 


3)Configure the Syncfusion JavaScript components through npm https://help.syncfusion.com/js/installation-and-deployment. This will fetch Syncfusion dependent files through node.

4)Import the dependent scripts in JSX file as like as below:

import React from 'react';
import ReactDOM from 'react-dom';
import 'syncfusion-javascript/Scripts/ej/web/ej.rte.min'
import 'syncfusion-javascript/Scripts/ej/common/ej.web.react.min'
class Sample extends React.Component { 
  render() {
     return <EJ.RTE id="rteDef"></EJ.RTE>
ReactDOM.render(<Sample/>, document.getElementById('autocomplete-default'));


5)Compile the application and run the demo to render the Syncfusion React components by using the below command,

 $ webpack


Refer to the following sample:



You must log in to leave a comment
Dec 18, 2018

I have a react app that is working absolutely well. I tried integrating Syncfusion Javascript into it using the example above and I always get React is not defined whenever import a syncfusion component meanwhile I have imported react earlier.

import React, { Component } from "react";
import ReactDOM from "react-dom";

import 'syncfusion-javascript/Scripts/ej/web/ej.datepicker.min'
import 'syncfusion-javascript/Scripts/ej/common/ej.web.react.min'

const App = () => {
return (
<p>Testing Syncfusion Here</p>

export default App;

ReactDOM.render(<App />, document.getElementById("app"));

Immediately I comment out the datepicker every works fine. I created a quickstart react app to test outside my original app and i still got the same issue. I tried running the sample zipped file, it will work with bundled bundle.js but if i compile mine, it won't run with my compiled bundle.js.

React Error

Am using Syncfusion Javascript

Below is my package,json

"name": "webpack-4-quickstart",
"version": "1.0.0",
"description": "> Webpack 4 tutorial: All You Need to Know, from 0 Conf to Production Mode",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
"repository": {
"type": "git",
"url": "git+https://github.com/valentinogagliardi/webpack-4-quickstart.git"
"keywords": [],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/valentinogagliardi/webpack-4-quickstart/issues"
"homepage": "https://github.com/valentinogagliardi/webpack-4-quickstart#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.7",
"mini-css-extract-plugin": "^0.2.0",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"uuid": "^3.2.1",
"webpack": "^4.2.0",
"webpack-cli": "3.1.1",
"webpack-dev-server": "^3.1.1"
"dependencies": {
"syncfusion-javascript": "D:\\Application API\\SyncFusion\\JavaScript-Widgets-15.2.40"


const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
module: {
rules: [
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ['env', 'react'],
compact: true
test: /\.html$/,
use: [
loader: "html-loader",
options: { minimize: true }
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"

I won't mind if I can get sample with latest react using my syncfusion version.


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