Forums Home / Wijmo / General Discussion
Posted by: Charles.Curtis on 24 November 2017, 1:56 am EST
Charles.Curtis
Posted 24 November 2017, 1:56 am EST
Hi there,
Fist of all I love your product - that being said I have moved over to strictly React and I have found it incredibly frustrating to try to integrate Wijmo into my React projects. I only renewed the license this year because I was told this would be seamless in the future, and it’s not.
It’s great that you can now successfully NPM install, but since I use Create-React-App I can’t successfully load the modules
Please is there any workaround for this?
grapecity
Posted 26 November 2017, 6:25 pm EST
Hi Jennifer,
Follow these steps to install Wijmo using create-react-app cli tool.
npm install -g create-react-app
create-react-app my-app
cd my-app
npm install "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20173.381.tgz"
Add this css to public/index.html
<link href="http://cdn.wijmo.com/5.20173.381/styles/wijmo.min.css" rel="stylesheet" />
Go to src/App.js
Add the following import:
import * as wjGrid from 'wijmo/wijmo.react.grid';
Use the control in your app:
class App extends Component {
data = [
{ country:"Japan", date: new Date(2017,1,1), sales: 0 },
{ country:"USA", date: new Date(2017,1,1), sales: 0 },
{ country:"UK", date: new Date(2017,1,1), sales: 0 },
{ country:"China", date: new Date(2017,1,1), sales: 0 }
]
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<wjGrid.FlexGrid
autoGenerateColumns={false}
columns={[
{ header: 'Country', binding: 'country', width: '*' },
{ header: 'Date', binding: 'date' },
{ header: 'Sales', binding: 'sales', format: 'c2' }
]}
itemsSource={this.data}
style={{ height: '250px', width: '500px' }}
/>
</div>
);
}
}
Find the attachment.
Run npm install in case of any error.
~nilay
Charles.Curtis
Posted 27 November 2017, 12:57 am EST
Hi!
Thanks so much for your quick reply. I’m able to perform the above, but maybe I should be more specific - I am using the TYPESCRIPT fork of create-react-app.
When I follow the steps above and attempt to add a wijmo element to a .tsx component I get the following error:
b JSX element type ‘FlexGrid’ is not a constructor function for JSX elements. Property ‘setState’ is missing in type ‘FlexGrid’
[/b]
Any idea why this is happening?
grapecity
Posted 28 November 2017, 12:54 am EST
Hi,
Are you sure you have imported the element properly?
import * as React from 'react';
import * as wjGrid from 'wijmo/wijmo.react.grid';
import './App.css';
const logo = require('./logo.svg');
class App extends React.Component {
data = [
{ country: 'Japan', date: new Date(2017, 1, 1), sales: 0 },
{ country: 'USA', date: new Date(2017, 1, 1), sales: 0 },
{ country: 'UK', date: new Date(2017, 1, 1), sales: 0 },
{ country: 'China', date: new Date(2017, 1, 1), sales: 0 }
];
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.tsx</code> and save to reload.
</p>
<wjGrid.FlexGrid
autoGenerateColumns={false}
columns={[
{ header: 'Country', binding: 'country', width: '*' },
{ header: 'Date', binding: 'date' },
{ header: 'Sales', binding: 'sales', format: 'c2' }
]}
itemsSource={this.data}
style={{ height: '250px', width: '500px' }}
/>
</div>
);
}
}
export default App;
Find the attached sample and compare your code.
~nilay
Charles.Curtis
Posted 28 November 2017, 3:46 am EST
Thank-you so much for your help!
To anyone struggling with this in the future, ensure that you are including the CSS file in index.tsx because you need it referenced there for development.
Thanks again!
abelkbil
Posted 23 January 2018, 11:38 pm EST
Hi,
Thanks You
I try to install via npm on a windows server machine, and get below error. What should be fixed.
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'install',
1 verbose cli 'http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz' ]
2 info using npm@5.6.0
3 info using node@v8.9.4
4 verbose npm-session f78e3872deeba7c1
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 200 http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz 4320ms
8 silly fetchPackageMetaData error for http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz Non-registry package missing package.json: http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz.
9 verbose stack Error: Non-registry package missing package.json: http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz.
9 verbose stack at BB.join (C:\Program Files\nodejs\node_modules\npm\node_modules\pacote\lib\finalize-manifest.js:160:23)
9 verbose stack at tryCatcher (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
9 verbose stack at Holder$5._callFunction (eval at generateHolderClass (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\join.js:92:16), <anonymous>:14:44)
9 verbose stack at Holder$5.checkFulfillment (eval at generateHolderClass (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\join.js:92:16), <anonymous>:29:30)
9 verbose stack at Promise.eval (eval at thenCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\join.js:14:16), <anonymous>:6:20)
9 verbose stack at Promise._settlePromise (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:566:21)
9 verbose stack at Promise._settlePromise0 (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
9 verbose stack at Promise._settlePromises (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
9 verbose stack at Async._drainQueue (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)
9 verbose stack at Async._drainQueues (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
9 verbose stack at Immediate.Async.drainQueues (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
9 verbose stack at runCallback (timers.js:789:20)
9 verbose stack at tryOnImmediate (timers.js:751:5)
9 verbose stack at processImmediate [as _immediateCallback] (timers.js:722:5)
10 verbose cwd C:\Users\Administrator\Downloads\Wijmo-Enterprise-Eval.20173.405\C1Wijmo-Enterprise-Eval_5.20173.405\Samples\TS\React\AllComponents\AllComponents
11 verbose Windows_NT 6.3.9600
12 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz"
13 verbose node v8.9.4
14 verbose npm v5.6.0
15 error code ENOPACKAGEJSON
16 error package.json Non-registry package missing package.json: http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz.
17 error package.json npm can't find a package.json file in your current directory.
18 verbose exit [ 1, true ]
manish.gupta
Posted 25 January 2018, 1:50 am EST
Hi,
We are sorry indeed for the delay. We are investigating on this issue.
~Manish
manish.gupta
Posted 25 January 2018, 3:05 pm EST
Hi,
We are sorry , we tried to install wijmo packages on Reacrt App created using create-react-app npm command and it gets installed successfully.
Please refer to the attached sample and screenshot.
~Manish
abelkbil
Posted 29 January 2018, 3:01 pm EST
Thanks Manish, It is working.
