jqwidgets and create-react-app

[christian.herzogParticipant]

Hello

I am evaluating jqwidgets when using create-react-app to setup the environment. So far I was unsuccessful. I was trying to get the datetime picker running, but all I got was “error ‘$’ is not defined no-undef”.

Is there any information available on how to integrate jqwidgets when using create-react-app? If not is something like that planned within in the next weeks? Renewing our subscription depends on this working.

[Ivo ZhulevParticipant]

Hi Christian,

Are you sure you have added all the needed jQWidgets files in your html file? Like jQuery, jqxCore etc?

Best Regards,
Ivo

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

[christian.herzogParticipant]

I would think so, however I want to include it in the build process that create-react-app offers.

Steps taken:
create-react-app jqTest
npm install --save jquery
put the whole jqWidgets package into /src

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from 'jquery';
import "./jqwidgets/jqwidgets/jqxcore.js";
import "./jqwidgets/jqwidgets/jqxdatetimeinput.js";
import "./jqwidgets/jqwidgets/jqxcalendar.js";
import "./jqwidgets/jqwidgets/jqxtooltip.js";
import "./jqwidgets/jqwidgets/globalization/globalize.js";

import JqxDateTimeInput from "./jqwidgets/jqwidgets-react/react_jqxdatetimeinput.js";

class App extends Component {
  render() {
    return (
      <div className="App">
        jquery version:  {$.fn.jquery}<br/>
        <JqxDateTimeInput
                      width={300} height={25}
                  />
      </div>
    );
  }
}

export default App;

Error:

Failed to compile
./src/jqwidgets/jqwidgets/jqxcore.js
  Line 6:  'ActiveXObject' is not defined       no-undef
  Line 7:  Unexpected use of 'name'             no-restricted-globals
  Line 8:  'xhrOnUnloadAbort' is not defined    no-undef
  Line 8:  'xhrCallbacks' is not defined        no-undef
  Line 8:  'xhrId' is not defined               no-undef
  Line 8:  'xhrOnUnloadAbort' is not defined    no-undef
  Line 8:  'xhrCallbacks' is not defined        no-undef
  Line 8:  'xhrCallbacks' is not defined        no-undef
  Line 8:  'xhrOnUnloadAbort' is not defined    no-undef
  Line 8:  'xhrCallbacks' is not defined        no-undef
  Line 8:  'define' is not defined              no-undef
  Line 8:  'define' is not defined              no-undef
  Line 8:  'define' is not defined              no-undef
  Line 8:  'jqwidgets' is not defined           no-undef
  Line 8:  'MSApp' is not defined               no-undef
  Line 8:  'MSApp' is not defined               no-undef
  Line 8:  'jqxArgs' is not defined             no-undef
  Line 8:  'jqxArgs' is not defined             no-undef
  Line 8:  'jqwidgets' is not defined           no-undef
  Line 9:  'rinlinejQuery' is not defined       no-undef
  Line 9:  'i' is not defined                   no-undef
  Line 9:  'i' is not defined                   no-undef
  Line 9:  'prefix' is not defined              no-undef
  Line 9:  'i' is not defined                   no-undef
  Line 9:  'match' is not defined               no-undef
  Line 9:  'prefix' is not defined              no-undef
  Line 9:  'match' is not defined               no-undef
  Line 9:  'i' is not defined                   no-undef
  Line 9:  'DocumentTouch' is not defined       no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'initialOffset' is not defined       no-undef
  Line 9:  'initialXOffset' is not defined      no-undef
  Line 9:  'xdelta' is not defined              no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'xframe' is not defined              no-undef
  Line 9:  'xframe' is not defined              no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'xv' is not defined                  no-undef
  Line 9:  'xdelta' is not defined              no-undef
  Line 9:  'xjqxAnimations' is not defined      no-undef
  Line 9:  'xv' is not defined                  no-undef
  Line 9:  'xjqxAnimations' is not defined      no-undef
  Line 9:  'xjqxAnimations' is not defined      no-undef
  Line 9:  'xframe' is not defined              no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'initialOffset' is not defined       no-undef
  Line 9:  'initialXOffset' is not defined      no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'xdelta' is not defined              no-undef
  Line 9:  'initialOffset' is not defined       no-undef
  Line 9:  'initialOffset' is not defined       no-undef
  Line 9:  'xdelta' is not defined              no-undef
  Line 9:  'xdelta' is not defined              no-undef
  Line 9:  'xoffset' is not defined             no-undef
  Line 9:  'xdelta' is not defined              no-undef
  Line 9:  'initialXOffset' is not defined      no-undef
  Line 9:  'initialXOffset' is not defined      no-undef
  Line 9:  'touchHorizontalEnd' is not defined  no-undef
  Line 9:  'xjqxAnimations' is not defined      no-undef
  Line 9:  'xjqxAnimations' is not defined      no-undef
  Line 9:  'xjqxAnimations' is not defined      no-undef
  Line 9:  'xoffset' is not defined             no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

Either I’m missing a file to include or the project setup is not compatible with jqwidgets? It would be a shame if there was no solution to that seeing that create-react-app is offered as “the best way to start building a new React single page application” in the official docs.

[adminKeymaster]

Hey Christian,

We will do our best to provide a How-to-use tutorial by the end of the week which uses Create React App. Thank you for the feedback till now. It really helps improving the product.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[adminKeymaster]

Please, refer to: http://www.jqwidgets.com/using-jqwidgets-react-components-with-create-react-app/. Hope this helps you.

[AsterionDBParticipant]

The suggestions offered by ‘admin’ will not be of any help. I doubt they even tried to reproduce the problem w/ create-react-app.

The obscure tidbit of information that you need is buried in the readme.md created by create-react-app.

Don’t feel bad. I wasted a day finding this info.

Note: I prefer being specific so the syntax I use is ‘… = new window.$.jqx.dataAdapter(…);’. Making that one change will produce a working demo.

## Using Global Variables

When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable.

You can avoid this by reading the global variable explicitly from the window object, for example:

`js
const $ = window.$;
`

This makes it obvious you are using a global variable intentionally rather than because of a typo.

Alternatively, you can force the linter to ignore any line by adding // eslint-disable-line after it.

[Peter StoevKeymaster]

AsterionDB, please be aware that the BLOG post is actually prepared because of this FORUM post and it actually shows exactly what the user asks and the sample is with jqxDateTimeInput React Component!

[AsterionDBParticipant]

Peter,

You need to update your documentation so that any reference to the global ‘$’ object is prefaced with ‘window.’ (or in the alternative, the line ‘const $ = window.$;’ is used). This applies for calls to both $.jqx.dataAdapter and $.fn.jquery (they should appear as ‘window.$.jqx.dataAdapter’ and ‘window.$.fn.jquery’) as detailed by the create-react-app readme.md file, which I quoted from above.

As I stated, I wasted two days finding this bit of information.

[Author]

Posts