jQuery UI Widgets Forums React Basic tutorial doesn't work

This topic contains 5 replies, has 5 voices, and was last updated by  Hristo 1 day, 5 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Basic tutorial doesn't work #102578

    asvarcas
    Participant

    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.

    • This topic was modified 4 months, 3 weeks ago by  asvarcas.
    • This topic was modified 4 months, 3 weeks ago by  asvarcas.
    • This topic was modified 4 months, 3 weeks ago by  asvarcas.
    Basic tutorial doesn't work #102588

    Martin
    Participant

    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/

    Basic tutorial doesn't work #102592

    asvarcas
    Participant

    Ok, thank you for your help.

    Basic tutorial doesn't work #103218

    unhandledException
    Participant

    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…

    Basic tutorial doesn't work #104464

    vivekkrs
    Participant

    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?

    Basic tutorial doesn't work #104467

    Hristo
    Participant

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.