Basic tutorial doesn't work

[asvarcasParticipant]

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)
../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"
  ]
}

Thanks in advance.

[MartinParticipant]

Hello asvarcas,

You can fix this by changing the react versions in package.json to be:

"react": "16.4.1",
 "react-dom": "16.4.1",
 "react-scripts": "1.1.4"

and reinstalling the node modules.

We are currently working on React with typescript and there will be a major update of the components around New Year.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[asvarcasParticipant]

Ok, thank you for your help.

[unhandledExceptionParticipant]

In case it helps anyone else; ‘reinstall the node modules’ by following these steps:

0. Modify the package.json file as above
1. Delete folder node_modules (located in the root folder)
2. Start a terminal:
3. Terminal: navigate to the my-app folder
4. Terminal: npm install

Note: there will be some warnings about high-risk / severe security updates…

[vivekkrsParticipant]

Team,

I am getting similar error. I have a existing React application and I am trying to integrate JqxDataTimeInput widget. But its giving below error:

Uncaught TypeError: Cannot set property ‘originalVal’ of undefined
at jqxcore.js:15
at Object.<anonymous> (jqxcore.js:15)

I even deleted package-lock.json then changed React versions as suggested above, deleted the node_modules folder and then ran npm install.

But the error remains same.

Can you please help?

[HristoParticipant]

Hello vivekkrs,

We recommend using the latest version.
Please, take a look at this page and try this approach:
https://www.npmjs.com/package/create-jqwidgets-react-tsx-app

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts