jQWidgets Forums

Tagged: react jqxbargauge "JQXLite is not a function"

This topic contains 2 replies, has 2 voices, and was last updated by cyclim 8 years ago.

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

Author

JQXLite is not a function (using react) Posts
June 4, 2017 at 1:33 pm JQXLite is not a function (using react) #94072

cyclim
Participant

Hi, I am trying out jqwidgets using react. Encounter TypeError: JQXLite is not a function
Please assist, thanks. Below how i the error is generated:

1) created react project using create-react-app
2) created html:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json”>
<link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico”>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.darkblue.css” type=”text/css” />

<script type=”text/javascript” src=”../src/jqwidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../src/jqwidgets/jqwidgets/jqxgrid.selection.js”></script>

<title>React App</title>
</head>
<body>
<div id=”root”></div>

</body>
</html>

3) index.js
ReactDOM.render(<App />, document.getElementById(‘root’));

4) App.js
import React, { Component } from ‘react’;
import JqxBarGauge from ‘./jqwidgets/jqwidgets-react/react_jqxbargauge.js’;

class App extends Component {
render() {
return (
<JqxBarGauge
width={600} height={600} max={150}
colorScheme={‘scheme02’} values={[102, 115, 130, 137]}
/>
)
}
}
export default App;

5) ran: npm install jqwidgets-framework
6) Have copied the following jqwidgets folders (taken from node_modules) to /src/jqwidgets directory:
/jqwidgets
/jqwidgets-rect
/scripts
/styles

7) ran: npm start, browser throw the following error:

TypeError: JQXLite is not a function
JqxBarGauge.createComponent
C:\project\sms\try_apps\jqw03\src\jqwidgets\jqwidgets-react\react_jqxbargauge.js:44
41 | }
42 | }
43 | if(!this.template) {
> 44 | JQXLite(this.componentSelector).html(this.props.template);
45 | }
46 | JQXLite(this.componentSelector).jqxBarGauge(options);
47 | };
View compiled
JqxBarGauge.componentDidMount
C:\project\sms\try_apps\jqw03\src\jqwidgets\jqwidgets-react\react_jqxbargauge.js:13
10 | export default class JqxBarGauge extends React.Component {
11 | componentDidMount() {
12 | let options = this.manageAttributes();
> 13 | this.createComponent(options);
14 | };
15 | manageAttributes() {
16 | let properties = [‘animationDuration’,’backgroundColor’,’barSpacing’,’baseValue’,’colorScheme’,’customColorScheme’,’disabled’,’endAngle’,’formatFunction’,’height’,’labels’,’max’,’min’,’relativeInnerRadius’,’rendered’,’startAngle’,’title’,’tooltip’,’useGradient’,’values’,’width’];
View compiled
(anonymous function)
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactCompositeComponent.js:265
262 | if (process.env.NODE_ENV !== ‘production’) {
263 | transaction.getReactMountReady().enqueue(function () {
264 | measureLifeCyclePerf(function () {
> 265 | return inst.componentDidMount();
266 | }, _this._debugID, ‘componentDidMount’);
267 | });
268 | } else {
View compiled
measureLifeCyclePerf
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactCompositeComponent.js:75
72 |
73 | ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
74 | try {
> 75 | return fn();
76 | } finally {
77 | ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
78 | }
View compiled
(anonymous function)
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactCompositeComponent.js:264
261 | if (inst.componentDidMount) {
262 | if (process.env.NODE_ENV !== ‘production’) {
263 | transaction.getReactMountReady().enqueue(function () {
> 264 | measureLifeCyclePerf(function () {
265 | return inst.componentDidMount();
266 | }, _this._debugID, ‘componentDidMount’);
267 | });
View compiled
CallbackQueue.notifyAll
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\CallbackQueue.js:76
73 | this._callbacks = null;
74 | this._contexts = null;
75 | for (var i = 0; i < callbacks.length; i++) {
> 76 | callbacks[i].call(contexts[i], arg);
77 | }
78 | callbacks.length = 0;
79 | contexts.length = 0;
View compiled
ReactReconcileTransaction.close
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactReconcileTransaction.js:80
77 | * After DOM is flushed, invoke all registered onDOMReady callbacks.
78 | */
79 | close: function () {
> 80 | this.reactMountReady.notifyAll();
81 | }
82 | };
83 |
View compiled
ReactReconcileTransaction.closeAll
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\Transaction.js:206
203 | // wrapper.close threw.
204 | errorThrown = true;
205 | if (initData !== OBSERVED_ERROR && wrapper.close) {
> 206 | wrapper.close.call(this, initData);
207 | }
208 | errorThrown = false;
209 | } finally {
View compiled
ReactReconcileTransaction.perform
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\Transaction.js:153
150 | } else {
151 | // Since method didn’t throw, we don’t want to silence the exception
152 | // here.
> 153 | this.closeAll(0);
154 | }
155 | } finally {
156 | this._isInTransaction = false;
View compiled
batchedMountComponentIntoNode
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactMount.js:126
123 | var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
124 | /* useCreateElement */
125 | !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
> 126 | transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
127 | ReactUpdates.ReactReconcileTransaction.release(transaction);
128 | }
129 |
View compiled
ReactDefaultBatchingStrategyTransaction.perform
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\Transaction.js:140
137 | // one of these calls threw.
138 | errorThrown = true;
139 | this.initializeAll(0);
> 140 | ret = method.call(scope, a, b, c, d, e, f);
141 | errorThrown = false;
142 | } finally {
143 | try {
View compiled
Object.batchedUpdates
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62
59 | if (alreadyBatchingUpdates) {
60 | return callback(a, b, c, d, e);
61 | } else {
> 62 | return transaction.perform(callback, null, a, b, c, d, e);
63 | }
64 | }
65 | };
View compiled
Object.batchedUpdates
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactUpdates.js:97
94 |
95 | function batchedUpdates(callback, a, b, c, d, e) {
96 | ensureInjected();
> 97 | return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
98 | }
99 |
100 | /**
View compiled
Object._renderNewRootComponent
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactMount.js:320
317 | // rendering, in componentWillMount or componentDidMount, will be batched
318 | // according to the current batching strategy.
319 |
> 320 | ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
321 |
322 | var wrapperID = componentInstance._instance.rootID;
323 | instancesByReactRootID[wrapperID] = componentInstance;
View compiled
Object._renderSubtreeIntoContainer
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactMount.js:401
398 | }
399 |
400 | var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
> 401 | var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
402 | if (callback) {
403 | callback.call(component);
404 | }
View compiled
Object.render
C:\project\sms\try_apps\jqw03\node_modules\react-dom\lib\ReactMount.js:422
419 | * @return {ReactComponent} Component instance rendered in container.
420 | */
421 | render: function (nextElement, container, callback) {
> 422 | return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
423 | },
424 |
425 | /**
View compiled
(anonymous function)
C:\project\sms\try_apps\jqw03\src\index.js:7
4 | import registerServiceWorker from ‘./registerServiceWorker’;
5 | import ‘./index.css’;
6 |
> 7 | ReactDOM.render(<App />, document.getElementById(‘root’));
8 | registerServiceWorker();
9 |
10 |
View compiled
6 stack frames were collapsed.

June 4, 2017 at 5:04 pm JQXLite is not a function (using react) #94074

Peter Stoev
Keymaster

You are missing to include required scripts such as jqxcore.js or you are using old scripts or the URLs are incorrect. All our demos use JQXLite. For using create-react-app, follow strictly the instructions documented on: http://www.jqwidgets.com/reactjs-components-documentation/documentation/create-react-app

Hope this helps.

Best Regards,
Peter Stoev

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

June 5, 2017 at 2:56 am JQXLite is not a function (using react) #94080

cyclim
Participant

Thank you! I followed the instructions and it works fine now.
Author

Posts

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

You must be logged in to reply to this topic.