Repository: DevExpress/devextreme-reactive

Issue #600: Basic example fails for material-ui
Created: 2017-12-20T08:31:22Z
I have searched this repository's issues and believe that this is not a duplicate.

Current Behaviour
Copy pasting the basic example from https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid-material-ui/README.md doesn’t work
Expected Behaviour
It renders the basic table
Steps to Reproduce (for Bugs)
Install material-ui latest beta 23
copy paste example from above with ad-hoc imports
notice the error in the console
The error
Unhandled promise rejection 
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.

Check the render method of `PluginHost$$1`.
Stack trace:
invariant@http://localhost:3000/static/js/bundle.js:19624:15
createFiberFromElement@http://localhost:3000/static/js/bundle.js:129660:5
reconcileSingleElement@http://localhost:3000/static/js/bundle.js:131461:23
reconcileChildFibers@http://localhost:3000/static/js/bundle.js:131565:35
reconcileChildrenAtExpirationTime@http://localhost:3000/static/js/bundle.js:131689:30
reconcileChildren@http://localhost:3000/static/js/bundle.js:131680:5
finishClassComponent@http://localhost:3000/static/js/bundle.js:131816:5
updateClassComponent@http://localhost:3000/static/js/bundle.js:131788:12
beginWork@http://localhost:3000/static/js/bundle.js:132162:16
performUnitOfWork@http://localhost:3000/static/js/bundle.js:134153:16
workLoop@http://localhost:3000/static/js/bundle.js:134217:26
callCallback@http://localhost:3000/static/js/bundle.js:124449:9
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:124488:7
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:124345:5
renderRoot@http://localhost:3000/static/js/bundle.js:134295:7
performWorkOnRoot@http://localhost:3000/static/js/bundle.js:134909:24
performWork@http://localhost:3000/static/js/bundle.js:134861:7
requestWork@http://localhost:3000/static/js/bundle.js:134770:7
scheduleWorkImpl@http://localhost:3000/static/js/bundle.js:134653:11
scheduleWork@http://localhost:3000/static/js/bundle.js:134615:12
enqueueSetState@http://localhost:3000/static/js/bundle.js:130113:7
./node_modules/react/cjs/react.development.js/Component.prototype.setState@http://localhost:3000/static/js/bundle.js:160872:3
onStateChange@http://localhost:3000/static/js/bundle.js:146423:11
notify@http://localhost:3000/static/js/bundle.js:147081:9
notifyNestedSubs@http://localhost:3000/static/js/bundle.js:147120:5
onStateChange@http://localhost:3000/static/js/bundle.js:146420:11
notify@http://localhost:3000/static/js/bundle.js:147081:9
notifyNestedSubs@http://localhost:3000/static/js/bundle.js:147120:5
onStateChange@http://localhost:3000/static/js/bundle.js:146420:11
notify@http://localhost:3000/static/js/bundle.js:147081:9
notifyNestedSubs@http://localhost:3000/static/js/bundle.js:147120:5
onStateChange@http://localhost:3000/static/js/bundle.js:146420:11
dispatch@http://localhost:3000/static/js/bundle.js:163730:7
dispatch@http://localhost:3000/projects/1/sync_tasks:2:31753
_callee$@http://localhost:3000/static/js/bundle.js:162722:18
tryCatch@http://localhost:3000/static/js/bundle.js:163996:37
invoke@http://localhost:3000/static/js/bundle.js:164230:22
defineIteratorMethods/</prototype[method]@http://localhost:3000/static/js/bundle.js:164048:16
step@http://localhost:3000/static/js/bundle.js:12958:22
step/<@http://localhost:3000/static/js/bundle.js:12969:13
run@http://localhost:3000/static/js/bundle.js:16828:22
notify/<@http://localhost:3000/static/js/bundle.js:16841:30
flush@http://localhost:3000/static/js/bundle.js:15323:9


the page code
import {
  Grid, Table, TableHeaderRow
} from '@devexpress/dx-react-grid-material-ui';

// ... start render from a Component
  <Grid
    rows={[
      { id: 0, product: 'DevExtreme', owner: 'DevExpress' },
      { id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
    ]}
    columns={[
      { name: 'id', title: 'ID' },
      { name: 'product', title: 'Product' },
      { name: 'owner', title: 'Owner' },
    ]}>
    <Table />
    <TableHeaderRow />
  </Grid>
// ... end of render 

Environment
devextreme-reactive: 1.0.0-beta.2
react: 16.1.1
browser: Firefox 58
bootstrap: none
react-bootstrap: none
material-ui: beta 23

Duplicate issue #616: Check the render method of `PluginHost$$1`.
Created: 2017-12-23T20:23:16Z
I am experiencing when trying the example on this page (https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-grid-material-ui/README.md):
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 PluginHost$$1.
after installing as per the set up for material UI. I installed using yarn add as opposed to npm. I have added babel-polyfills to webpack as per the instructions.
Can any one advise what I might be doing wrong? I can see the demo works online.
Here are my deps:
"dependencies": {
"@devexpress/dx-react-core": "^1.0.0-beta.2",
"@devexpress/dx-react-grid": "^1.0.0-beta.2",
"@devexpress/dx-react-grid-material-ui": "^1.0.0-beta.2",
"autoprefixer": "7.1.2",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"bootlint": "^0.14.2",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "^2.3.0",
"classnames": "^2.2.5",
"create-react-class": "^15.6.2",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"each-async": "^1.1.1",
"electron": "v1.7.6",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"google-maps-react": "^1.1.2",
"history": "^4.7.2",
"html-webpack-plugin": "2.29.0",
"indent-string": "^3.2.0",
"jest": "^21.2.1",
"jest-each": "^0.3.1",
"jquery": "^3.2.1",
"jscodeshift": "^0.3.32",
"jump.js": "^1.0.2",
"lodash": "^4.17.4",
"material-ui": "^1.0.0-beta.25",
"material-ui-codemod": "^1.0.0-beta.11",
"material-ui-icons": "^1.0.0-beta.17",
"node-sass-chokidar": "^0.0.3",
"npm-run-all": "^4.1.1",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"prop-types": "^15.6.0",
"react": "^15.6.1",
"react-bootstrap": "^0.31.5",
"react-bootstrap-carousel": "^1.2.0",
"react-dev-utils": "^4.0.1",
"react-dom": "^15.6.1",
"react-flexbox-grid": "^2.0.0",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.6",
"react-redux-scroll": "^0.0.14",
"react-responsive-carousel": "^3.1.26",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.8",
"react-scroll": "^1.5.4",
"react-scroll-to-component": "^1.0.1",
"react-scrollbar-size": "^2.0.2",
"react-slick": "^0.15.4",
"react-tagsinput": "^3.19.0",
"react-test-renderer": "^15.6.1",
"react-transition-group": "^2.2.1",
"react-waypoint": "^7.1.0",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-form": "^7.1.1",
"redux-form-material-ui": "^5.0.0-beta.2",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"reselect": "^3.0.1",
"smoothscroll": "^0.4.0",
"style-loader": "0.18.2",
"styled-components": "^2.2.3",
"svg-react-loader": "^0.4.5",
"sw-precache-webpack-plugin": "0.11.4",
"typeface-roboto": "^0.0.45",
"url": "^0.11.0",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3",
"wowjs": "^1.1.3"
},

Closing comment (2017-12-25T05:11:04Z): Hi,
We are closing this issue as a duplicate of #600.