React UI with webpack

[iasrdParticipant]

Hi, we are using Webpack with React in our project. So we are trying to integrate your React UI to our project but we couldn’t do it. We are facing an error at runtime.

Error is:

Uncaught TypeError: Cannot set property 'originalVal' of undefined
    at eval (jqxcore.js?615d:15)
    at eval (jqxcore.js?615d:15)
    at Object.<anonymous> (bundle.js:1)
    at Q (bundle.js:1)
    at t (bundle.js:1)
    at eval (react_jqxcheckbox.js?5b18:9)
    at Object.<anonymous> (bundle.js:1)
    at Q (bundle.js:1)
    at t (bundle.js:1)
    at eval (HomePage.js?caff:3)

Webpack config file:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: [
      'react-hot-loader/patch',
      './srcjsx/index.js'
    ]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.resolve(__dirname, 'node_modules/'),
        loader: 'babel-loader',

      }, {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }, {
        test: /\.(gif|png|jpg|jpeg|svg)(\?[a-z0-9]+)?$/,
        loader: 'file-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    modules: [
      'srcjsx',
      'node_modules'
    ]
  },
  output: {
    path: __dirname + '/WebContent/js',
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './WebContent',
    hot: true
  }
};

By the way, I put the jqwidgets-react and jqwidgets folder into the source folder. At first, I tried to install via npm install but it seems to not work that way.

[HristoParticipant]

Hello iasrd,

I would like to suggest you look at this tutorial – it demonstrates how to use Webpack with React.
I tested it and it seems to work fine.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[asvarcasParticipant]

I have the same problem.
I’ve followed the steps here: Create React App with jQWidgets and it doesn’t seems to work.

On the browser I get:

TypeError: Cannot set property ‘originalVal’ of undefined
(anonymous function)
C:/Etriek/Servidores/xampp/htdocs/my-app/src/assets/jqwidgets/jqxcore.js:15

Steps to reproduce:

1.- npx create-react-app my-app

2.- In the src folder add an assets folder with the jqwidgets and the jqwidgets-react folders inside of it (version 6.1).

3.- Finally inside App.js file write your widget code:

    import React, { Component } from 'react';
 
    import JqxDateTimeInput from './assets/jqwidgets-react/react_jqxdatetimeinput';
 
    class App extends Component {
        render() {
            return (
                <div>
                    <h4>My First jQWidgets React Component</h4>
                    <JqxDateTimeInput width={200} height={30} />
                </div>
            );
        }
    }
 
    export default App;

I have npm version 6.1.0.

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-scripts": "2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[HristoParticipant]

Hello asvarcas,

It is a duplicated post.
Please, take a look at this:
https://www.jqwidgets.com/community/topic/basic-tutorial-doesnt-work/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts