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

How to import the Syncfusion ReactJS components using webpack?

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

 

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

 

  1. Configure the Syncfusion JavaScript components through npm https://help.syncfusion.com/js/installation-and-deployment. This will fetch Syncfusion dependent files through node.
  2. Import the dependent scripts in JSX file as like as below:

 

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

 

Refer to the following sample:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/webpack.config-1368596260.zip

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7952 08/29/2017 08/29/2017 JavaScript General
Tags:
Did you find this information helpful?
Comments
Charles 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 (
<div>
<p>Testing Syncfusion Herep>
div>
);
};

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

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"
}
}

Webpack.config.js

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.

Reply
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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