Error while using IgniteUI grid components in React

Question

I am new to React and I am using the starter project from https://github.com/facebookincubator/create-react-app. I am trying to use IgniteUI grid from https://github.com/IgniteUI/igniteui-react.

I am trying to use the <IgGrid /> tag in my javascript.

I get following error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of `UIGrid`.
    at invariant (invariant.js:44)
    at instantiateReactComponent (instantiateReactComponent.js:77)
    at instantiateChild (ReactChildReconciler.js:44)
    at ReactChildReconciler.js:71
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildrenImpl (traverseAllChildren.js:93)
    at traverseAllChildren (traverseAllChildren.js:172)
    at Object.instantiateChildren (ReactChildReconciler.js:70)
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)

The UIGrid.js used for calling the code is as follows:

import '../scripts/ignite-react.js'
import IgGrid from '../scripts/igniteui-react.min.js';
import React from 'react';


class UIGrid extends React.Component{
render(){
return(
<div id="uigrid">
<h2> Play </h2>
<IgGrid />
</div>

);
}
}

export default UIGrid;

The index.html is as follows:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">  
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>     
  </body>   
</html>

The index.js is as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import UIGrid from './components/grid/UIGrid'
import './index.css';

ReactDOM.render(
  <UIGrid />,
  document.getElementById('root')
);

The igniteui-react.min.js script is included in scripts folder of the project.

Looking for a correct way to implement the grid in my project.

Any help is appreciated. Thanks!

score 1 · Answer 1 · answered Apr 07 '17 at 13:50

There isn't any good out-of-the box solution for this at the moment. At the time of creating the React wrappers we were mostly concerned about having them run through script tags as the most common Node boilerplates had large variety of issues working with jQuery, jQuery UI and therefore Ignite UI as well. For Webpack you could workaround most of these using ProvidePlugin but the create-react-app ones don't expose a config. We realize it's an important feature to be able to use Ignite UI and the React wrappers in such apps so we are working on it with high priority at the moment.

Please, follow the development on our GitHub repo.

Error while using IgniteUI grid components in React

1 Answers1