CXJS Component as Child to a native react component

Question

I mixed a lot of functional components in cxjs with plain react components.

but sometimes when i try to use a cxjs-component as a child of a react component, i get a

"
error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
"

How can I solve this?

Thank you so much !

Code which causes this problem:

CXJS component example, which works within cxjs as a child but causes error in react as a child:
import { Chart, Gridlines, NumericAxis } from 'cx/charts';
import { Rectangle, Svg } from 'cx/svg';
import {Controller} from "cx/ui";

export  class Dcc extends Controller {
 onInit(){
     alert("Demochart initialised");
 }
}

    export default <cx>
    <div class="widgets" controller = {Dcc}>
        tiomo test
        <Svg style="width:300px;height:200px" margin="10 20 30 50">
            <Chart axes={{
                x: <NumericAxis />,
                y: <NumericAxis vertical/>
            }}>
                <Rectangle fill="white" />
                <Gridlines />
            </Chart>
        </Svg>
        timo
    </div>
</cx>

and now a react grid component to use it with: - i can add react children as much as i like. but no cxjs like the above.

import React from 'react';
import { VDOM } from "cx-react";
import { findDOMNode } from "react-dom";
import GridLayout from 'react-grid-layout';
import "./index.scss";



import Demochart from "../../demochart";

export default class MyGrid extends React.Component {


    render() {



        return (


            <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>

                <div key="g" data-grid={{x: 14, y: 5, w: 6, h: 6}}><Demochart/></div>


            </GridLayout>

        )
    }

}

Answer 1

Cx wrapper is required in order to use CxJS widgets inside React components.

<MyReactComponent>
  <Cx store={myCxStore} subscribe>
     <Grid ... />
  </Cx>
</MyReactComponent>

CxJS components cannot work without a store, so you must pass one.

It's more common to use React components inside CxJS.

<cx>
  <div>
    <MyReactComponent />
  </div>
</cx>