React-grid-layout: ES6 import fails in render method

[moritzschaefer]

Importing ReactGridLayout like this

import ReactGridLayout from "react-grid-layout";

and using it like this in render()

    <ReactGridLayout
      className="mainContainer"
      layout={layout}
      cols={12}
      rowHeight={30}
      width={1200}
    ><children/></ReactGridLayout>

compiles but leads to the following error in the browser console (and a white-screen):

proxyConsole.js:54 Warning: React.createElement: 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.

Check the render method of GeneViewer.
in GeneViewer (created by Connect(GeneViewer))
in Connect(GeneViewer) (created by Route)
in Route (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by Route)
in Route (created by withRouter(App))
in withRouter(App)
in Router (created by ConnectedRouter)
in ConnectedRouter
in PersistGate
in Provider
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:54
printWarning @ warning.js:33
warning @ warning.js:57
createElement @ react.development.js:1275
./src/GeneViewer/index.tsx.GeneViewer.render @ index.tsx:117
finishClassComponent @ react-dom.development.js:10249
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState @ react.development.js:218
PersistGate._this.handlePersistorState @ react.js:37
dispatch @ createStore.js:173
rehydrate @ persistStore.js:91
(anonymous) @ persistReducer.js:66
Promise resolved (async)
(anonymous) @ persistReducer.js:65
Promise resolved (async)
(anonymous) @ persistReducer.js:61
computeNextEntry @ VM6992:2
recomputeStates @ VM6992:2
(anonymous) @ VM6992:2
dispatch @ createStore.js:165
dispatch @ VM6992:2
(anonymous) @ createEpicMiddleware.js:59
(anonymous) @ middleware.js:13
dispatch @ VM6992:2
persistor.persist @ persistStore.js:99
persistStore @ persistStore.js:102
./src/index.tsx @ index.tsx:63
__webpack_require__ @ bootstrap 97c9be831c1e011b5fcb:669
fn @ bootstrap 97c9be831c1e011b5fcb:87
0 @ Loading.tsx:10
__webpack_require__ @ bootstrap 97c9be831c1e011b5fcb:669
(anonymous) @ bootstrap 97c9be831c1e011b5fcb:715
(anonymous) @ bundle.js:719
invariant.js:42 Uncaught Error: 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.

Check the render method of GeneViewer.
at invariant (invariant.js:42)
at createFiberFromElementType (react-dom.development.js:8185)
at createFiberFromElement (react-dom.development.js:8130)
at createChild (react-dom.development.js:8832)
at reconcileChildrenArray (react-dom.development.js:9132)
at reconcileChildFibers (react-dom.development.js:9495)
at reconcileChildrenAtPriority (react-dom.development.js:10127)
at reconcileChildren (react-dom.development.js:10118)
at updateHostComponent (react-dom.development.js:10370)
at beginWork (react-dom.development.js:10609)
at performUnitOfWork (react-dom.development.js:12573)
at workLoop (react-dom.development.js:12682)
at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
at invokeGuardedCallback (react-dom.development.js:1195)
at performWork (react-dom.development.js:12800)
at scheduleUpdateImpl (react-dom.development.js:13185)
at scheduleUpdate (react-dom.development.js:13124)
at Object.enqueueSetState (react-dom.development.js:9646)
at PersistGate../node_modules/react/cjs/react.development.js.ReactComponent.setState (react.development.js:218)
at PersistGate._this.handlePersistorState (react.js:37)
at Object.dispatch (createStore.js:173)
at Object.rehydrate (persistStore.js:91)
at persistReducer.js:66
at
invariant @ invariant.js:42
createFiberFromElementType @ react-dom.development.js:8185
createFiberFromElement @ react-dom.development.js:8130
createChild @ react-dom.development.js:8832
reconcileChildrenArray @ react-dom.development.js:9132
reconcileChildFibers @ react-dom.development.js:9495
reconcileChildrenAtPriority @ react-dom.development.js:10127
reconcileChildren @ react-dom.development.js:10118
updateHostComponent @ react-dom.development.js:10370
beginWork @ react-dom.development.js:10609
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState @ react.development.js:218
PersistGate._this.handlePersistorState @ react.js:37
dispatch @ createStore.js:173
rehydrate @ persistStore.js:91
(anonymous) @ persistReducer.js:66
Promise resolved (async)
(anonymous) @ persistReducer.js:65
Promise resolved (async)
(anonymous) @ persistReducer.js:61
computeNextEntry @ VM6992:2
recomputeStates @ VM6992:2
(anonymous) @ VM6992:2
dispatch @ createStore.js:165
dispatch @ VM6992:2
(anonymous) @ createEpicMiddleware.js:59
(anonymous) @ middleware.js:13
dispatch @ VM6992:2
persistor.persist @ persistStore.js:99
persistStore @ persistStore.js:102
./src/index.tsx @ index.tsx:63
__webpack_require__ @ bootstrap 97c9be831c1e011b5fcb:669
fn @ bootstrap 97c9be831c1e011b5fcb:87
0 @ Loading.tsx:10
__webpack_require__ @ bootstrap 97c9be831c1e011b5fcb:669
(anonymous) @ bootstrap 97c9be831c1e011b5fcb:715
(anonymous) @ bundle.js:719
proxyConsole.js:54 The above error occurred in the

component:
in div (created by GeneViewer)
in GeneViewer (created by Connect(GeneViewer))
in Connect(GeneViewer) (created by Route)
in Route (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by Route)
in Route (created by withRouter(App))
in withRouter(App)
in Router (created by ConnectedRouter)
in ConnectedRouter
in PersistGate
in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:54
logCapturedError$1 @ react-dom.development.js:8305
captureError @ react-dom.development.js:12993
performWork @ react-dom.development.js:12825
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState @ react.development.js:218
PersistGate._this.handlePersistorState @ react.js:37
dispatch @ createStore.js:173
rehydrate @ persistStore.js:91
(anonymous) @ persistReducer.js:66
Promise resolved (async)
(anonymous) @ persistReducer.js:65
Promise resolved (async)
(anonymous) @ persistReducer.js:61
computeNextEntry @ VM6992:2
recomputeStates @ VM6992:2
(anonymous) @ VM6992:2
dispatch @ createStore.js:165
dispatch @ VM6992:2
(anonymous) @ createEpicMiddleware.js:59
(anonymous) @ middleware.js:13
dispatch @ VM6992:2
persistor.persist @ persistStore.js:99
persistStore @ persistStore.js:102
./src/index.tsx @ index.tsx:63
__webpack_require__ @ bootstrap 97c9be831c1e011b5fcb:669
fn @ bootstrap 97c9be831c1e011b5fcb:87
0 @ Loading.tsx:10
__webpack_require__ @ bootstrap 97c9be831c1e011b5fcb:669
(anonymous) @ bootstrap 97c9be831c1e011b5fcb:715
(anonymous) @ bundle.js:719
invariant.js:42 Uncaught (in promise) Error: 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.

Check the render method of GeneViewer.
at invariant (invariant.js:42)
at createFiberFromElementType (react-dom.development.js:8185)
at createFiberFromElement (react-dom.development.js:8130)
at createChild (react-dom.development.js:8832)
at reconcileChildrenArray (react-dom.development.js:9132)
at reconcileChildFibers (react-dom.development.js:9495)
at reconcileChildrenAtPriority (react-dom.development.js:10127)
at reconcileChildren (react-dom.development.js:10118)
at updateHostComponent (react-dom.development.js:10370)
at beginWork (react-dom.development.js:10609)
at performUnitOfWork (react-dom.development.js:12573)
at workLoop (react-dom.development.js:12682)
at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
at invokeGuardedCallback (react-dom.development.js:1195)
at performWork (react-dom.development.js:12800)
at scheduleUpdateImpl (react-dom.development.js:13185)
at scheduleUpdate (react-dom.development.js:13124)
at Object.enqueueSetState (react-dom.development.js:9646)
at PersistGate../node_modules/react/cjs/react.development.js.ReactComponent.setState (react.development.js:218)
at PersistGate._this.handlePersistorState (react.js:37)
at Object.dispatch (createStore.js:173)
at Object.rehydrate (persistStore.js:91)
at persistReducer.js:66
at

[STRML]

<children /> is not valid usage of React. This is not a bug in this module. Please refer to the React documentation.

[RishabhTayal]

What's the solution for this? I am seeing same error. here is my code:

import * as React from 'react';
import GridLayout from 'react-grid-layout';

export default class MyGrid extends React.Component<any, any> {

    render() {

        return (
            <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
                <div key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2, static: true }}>a</div>
                <div key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }}>b</div>
                <div key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>c</div>
            </GridLayout>
        );
    }
}

[YannickAWE]

Same error for me. What I deed is import GridLayout like that :

import * as GridLayout from 'react-grid-layout';

instead of :

import { GridLayout } from 'react-grid-layout';