Material-ui: Error, Check the render method of `CircularIndeterminate`.

[japrogramer]

https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/docs/src/pages/demos/progress/CircularIndeterminate.js#L13

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 `CircularIndeterminate`.
invariant
node_modules/fbjs/lib/invariant.js:42
getFiberTagFromObjectType
node_modules/react-dom/cjs/react-dom.development.js:9647
createFiberFromElement
node_modules/react-dom/cjs/react-dom.development.js:9607
createChild
node_modules/react-dom/cjs/react-dom.development.js:11978
reconcileChildrenArray
node_modules/react-dom/cjs/react-dom.development.js:12229
reconcileChildFibers
node_modules/react-dom/cjs/react-dom.development.js:12542
reconcileChildrenAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:12902
reconcileChildren
node_modules/react-dom/cjs/react-dom.development.js:12893
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js:13232
beginWork
node_modules/react-dom/cjs/react-dom.development.js:13719
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:15741
workLoop
node_modules/react-dom/cjs/react-dom.development.js:15780
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:15820
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:16437
performWork
node_modules/react-dom/cjs/react-dom.development.js:16358
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:16330
requestWork
node_modules/react-dom/cjs/react-dom.development.js:16230
scheduleWork$1
node_modules/react-dom/cjs/react-dom.development.js:16096
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:16663
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:16690
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:16717
./node_modules/react-dom/cjs/react-dom.development.js/ReactRoot.prototype.render
node_modules/react-dom/cjs/react-dom.development.js:17000
legacyRenderSubtreeIntoContainer/<
node_modules/react-dom/cjs/react-dom.development.js:17140
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:16557
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:17136
render
node_modules/react-dom/cjs/react-dom.development.js:17195
./src/index.js
src/index.js:7

   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 

__webpack_require__
/app/frontclient/webpack/bootstrap 621b8005d53d7fe7c8da:678
fn
/app/frontclient/webpack/bootstrap 621b8005d53d7fe7c8da:88
[0]
http://127.0.0.1:3000/static/js/bundle.js:108286:18
__webpack_require__
/app/frontclient/webpack/bootstrap 621b8005d53d7fe7c8da:678
(anonymous function)
/app/frontclient/webpack/bootstrap 621b8005d53d7fe7c8da:724
(anonymous function)
http://127.0.0.1:3000/static/js/bundle.js:1:11

[oliviertassinari]

Your issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[japrogramer]

I just updated to material-ui/core .. it was working in the material-ui library .. it is hard to track down exactly what it is .. I have no errors when compiling only when running

[japrogramer]

@oliviertassinari
here, this component gives this error

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card, { CardContent, CardMedia } from '@material-ui/core/Card';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  card: {
    display: 'flex',
    paddingBottom: theme.spacing.unit,
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: '1 0 auto',
  },
  cover: {
    width: 151,
    height: 151,
  },
  controls: {
    display: 'flex',
    alignItems: 'center',
    paddingLeft: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
  },
});

function ProductCard(props) {
  const { classes, theme, edge } = props;

  return (
    <div>
      <Card className={classes.card}>
        <CardMedia
          className={classes.cover}
          image="/static/images/cards/live-from-space.jpg"
          title="Live from space album cover"
        />
        <div className={classes.details}>
          <CardContent className={classes.content}>
            <Typography type="headline">{edge.node.title}</Typography>
            <Typography type="subheading" color="secondary">
              {edge.node.description}
            </Typography>
          </CardContent>
          <div className={classes.controls} />
        </div>
      </Card>
    </div>
  );
}

ProductCard.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(ProductCard);

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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:17.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:20.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:16.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:25.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:28.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:24.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:33.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:36.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:32.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:40.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:43.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at DrawerList.js:39.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at topbar.js:97.
    in TopBar (created by WithStyles(TopBar))
    in WithStyles(TopBar) (at App.js:46)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at topbar.js:98.
    in TopBar (created by WithStyles(TopBar))
    in WithStyles(TopBar) (at App.js:46)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
Warning: Failed prop type: Invalid prop `color` of value `contrast` supplied to `IconButton`, expected one of ["default","inherit","primary","secondary"].
    in IconButton (created by WithStyles(IconButton))
    in WithStyles(IconButton) (at topbar.js:62)
    in div (created by Toolbar)
    in Toolbar (created by WithStyles(Toolbar))
    in WithStyles(Toolbar) (at topbar.js:61)
    in header (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by AppBar)
    in AppBar (created by WithStyles(AppBar))
    in WithStyles(AppBar) (at topbar.js:60)
    in TopBar (created by WithStyles(TopBar))
    in WithStyles(TopBar) (at App.js:46)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
Warning: Failed prop type: The prop `open` is marked as required in `Menu`, but its value is `undefined`.
    in Menu (created by WithStyles(Menu))
    in WithStyles(Menu) (at topbar.js:68)
    in span (created by IconButton)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by IconButton)
    in IconButton (created by WithStyles(IconButton))
    in WithStyles(IconButton) (at topbar.js:62)
    in div (created by Toolbar)
    in Toolbar (created by WithStyles(Toolbar))
    in WithStyles(Toolbar) (at topbar.js:61)
    in header (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by AppBar)
    in AppBar (created by WithStyles(AppBar))
    in WithStyles(AppBar) (at topbar.js:60)
    in TopBar (created by WithStyles(TopBar))
    in WithStyles(TopBar) (at App.js:46)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
Warning: Failed prop type: The prop `open` is marked as required in `Popover`, but its value is `undefined`.
    in Popover (created by WithStyles(Popover))
    in WithStyles(Popover) (created by Menu)
    in Menu (created by WithStyles(Menu))
    in WithStyles(Menu) (at topbar.js:68)
    in span (created by IconButton)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by IconButton)
    in IconButton (created by WithStyles(IconButton))
    in WithStyles(IconButton) (at topbar.js:62)
    in div (created by Toolbar)
    in Toolbar (created by WithStyles(Toolbar))
    in WithStyles(Toolbar) (at topbar.js:61)
    in header (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by AppBar)
    in AppBar (created by WithStyles(AppBar))
    in WithStyles(AppBar) (at topbar.js:60)
    in TopBar (created by WithStyles(TopBar))
    in WithStyles(TopBar) (at App.js:46)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
Warning: Failed prop type: The prop `open` is marked as required in `Modal`, but its value is `undefined`.
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Popover)
    in Popover (created by WithStyles(Popover))
    in WithStyles(Popover) (created by Menu)
    in Menu (created by WithStyles(Menu))
    in WithStyles(Menu) (at topbar.js:68)
    in span (created by IconButton)
    in button (created by ButtonBase)
    in ButtonBase (created by WithStyles(ButtonBase))
    in WithStyles(ButtonBase) (created by IconButton)
    in IconButton (created by WithStyles(IconButton))
    in WithStyles(IconButton) (at topbar.js:62)
    in div (created by Toolbar)
    in Toolbar (created by WithStyles(Toolbar))
    in WithStyles(Toolbar) (at topbar.js:61)
    in header (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by AppBar)
    in AppBar (created by WithStyles(AppBar))
    in WithStyles(AppBar) (at topbar.js:60)
    in TopBar (created by WithStyles(TopBar))
    in WithStyles(TopBar) (at App.js:46)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
./src/App.js
  Line 2:   'Link' is defined but never used              no-unused-vars
  Line 10:  'classNames' is defined but never used        no-unused-vars
  Line 40:  'classes' is assigned a value but never used  no-unused-vars
  Line 40:  'theme' is assigned a value but never used    no-unused-vars
webpackHotDevClient.js:136
./src/screens/products/products.js
  Line 2:  'Link' is defined but never used  no-unused-vars
webpackHotDevClient.js:136
./src/screens/products/product.js
  Line 2:  'Link' is defined but never used  no-unused-vars
webpackHotDevClient.js:136
./src/components/Tables/withDelete.js
  Line 2:  'sortBy' is defined but never used  no-unused-vars
webpackHotDevClient.js:136
./src/screens/products/components/cards.js
  Line 32:  'theme' is assigned a value but never used  no-unused-vars
webpackHotDevClient.js:136
There were more warnings in other files.
You can find a complete log in the terminal.
webpackHotDevClient.js:130
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, or you might have mixed up default and named imports.

Check your code at cards.js:37.
    in ProductCard (created by WithStyles(ProductCard))
    in WithStyles(ProductCard) (at products.js:52)
    in div (at products.js:51)
    in div (at products.js:50)
    in AllProductsStub (created by Query)
    in Query (created by Apollo(AllProductsStub))
    in Apollo(AllProductsStub) (created by Route)
    in Route (at App.js:58)
    in Switch (at App.js:53)
    in main (at App.js:52)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check your code at cards.js:43.
    in ProductCard (created by WithStyles(ProductCard))
    in WithStyles(ProductCard) (at products.js:52)
    in div (at products.js:51)
    in div (at products.js:50)
    in AllProductsStub (created by Query)
    in Query (created by Apollo(AllProductsStub))
    in Apollo(AllProductsStub) (created by Route)
    in Route (at App.js:58)
    in Switch (at App.js:53)
    in main (at App.js:52)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)
bundle.js:87747:16
The above error occurred in the <div> component:
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Card)
    in Card (created by WithStyles(Card))
    in WithStyles(Card) (at cards.js:36)
    in div (at cards.js:35)
    in ProductCard (created by WithStyles(ProductCard))
    in WithStyles(ProductCard) (at products.js:52)
    in div (at products.js:51)
    in div (at products.js:50)
    in AllProductsStub (created by Query)
    in Query (created by Apollo(AllProductsStub))
    in Apollo(AllProductsStub) (created by Route)
    in Route (at App.js:58)
    in Switch (at App.js:53)
    in main (at App.js:52)
    in div (at App.js:45)
    in div (at App.js:44)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:43)
    in ApolloProvider (at App.js:42)
    in App (created by WithStyles(App))
    in WithStyles(App) (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
bundle.js:87747:16
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, or you might have mixed up default and named imports.

Check the render method of `ProductCard`.
invariant.js:42
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, or you might have mixed up default and named imports.

Check the render method of `ProductCard`.

[japrogramer]

I fixed it .. it waas a bunch of imports that changed .. hmm, if only there where tools to auto correct import or if only the errors where more exact.

[oliviertassinari]

If only you had a look at the changelog. The import change is documented as well as the codemod to convert your codebase automatically.

[t0mdicks0n]

I have been stuck on this exact same issue for about 4 hours now. Can't seem to find anything when Googling, even when looking for your mentioned "codemod" or with the clue that the error is caused due to import change. Would love to be pointed in the right direction.

[japrogramer]

I fixed the imports by searching the repo for each material-ui imported component I used and finding the correct way to import them from the result s

[t0mdicks0n]

I did this as well but for some reason a couple of my components still get's exported as undefined. I think it has to do with withStyles since that seems to be the common denominator. I do this in the component that get exported as undefined:

export default compose(
    withRouter,
    withStyles(styles)
)(Navbar);

Did you have to change this somehow when upgrading to Material UI V1?

[japrogramer]

No, I did not have to do that

[oliviertassinari]

@t0mdicks0n Are you able to isolate the problem to a single module? Can I have a look at the imports?

[t0mdicks0n]

For sure @oliviertassinari : https://gist.github.com/t0mdicks0n/f5b26761aed7133e5f89b2b0920a5077

I am sure it's me doing something wrong but it's hard to see what. Ty so much for quick reply!

[oliviertassinari]

@t0mdicks0n These imports are incorrect:

import MenuIcon from '@material-ui/icons/Menu';
import Menu, { MenuItem } from '@material-ui/core/Menu';

The codemod I'm referring to is here.

[t0mdicks0n]

You are 100% right about that @oliviertassinari ! I changed that and the module got exported as expected. Ty so much!

What fooled me for anyone else reading this in the future was that I didn't get an import error in Webpack but then at runtime exported the whole module as undefined because of this. Will run the codemod.