TypeError: __webpack_require__.i(...) is not a function when using createMuiTheme

[krismartin]

I'm getting TypeError: __webpack_require__.i(...) is not a function error when calling the createMuiTheme. I followed the example code from https://material-ui-1dab0.firebaseapp.com/customization/themes.

const theme = createMuiTheme({
  palette: createPalette({
    primary: purple, // Purple and green play nicely together.
    accent: {
      ...green,
      A400: '#00e677',
    },
    error: red,
  }),
});

Versions

• Material-UI: 1.0.0-alpha.19
• React: 15.6.1
• Browser: Chrome 58.0.3029.110

[oliviertassinari]

Can you share the stack trace of the issue?

[krismartin]

This is very strange. It is working now without changing anything. Just did a browser refresh and I'm not getting the error anymore.

[oliviertassinari]

Feel free to reopen the issue if you can provide a reproduction test case then. Sounds like a issue on webpack land.

[krismartin]

@oliviertassinari While I got you here, I have a question regarding theme customization.

I'm trying to change the primary color to blue, which works fine, except the focused input fields and labels still have the old color as you can see below:

Here's my theme:

import { blue } from 'material-ui/styles/colors';

const muiTheme = createMuiTheme({
  palette: createPalette({
    primary: blue,
  })
});

[oliviertassinari]

I think that it's expected, we use the accent hue of the primary color. Try out a different color to see that behavior.

[krismartin]

How do you recommend changing the color of the focused input fields and labels to be the same as the primary color?

[oliviertassinari]

How do you recommend changing the color of the focused input fields and labels

The easier one would be the change the A700 hues of the blue color. The more elegant one would be to overrides the MuiInput.inkbar&:after->backgroundColor style as well as MuiFormLabel.focused->color.

[krismartin]

Thank you. I'll give that a shot.

[krismartin]

@oliviertassinari I can't seem to figure out where to put the css overrides (MuiInput.inkbar&:after->backgroundColor and MuiFormLabel.focused->color). Can you give me some example please?

[oliviertassinari]

Here is an example mixing two approach: https://www.webpackbin.com/bins/-KnpurLIGtBVrZx27iEL

const styleSheet = createStyleSheet('HelloWorld', theme => ({
  inkbar: {
    '&:after': {
      backgroundColor: 'red'
    }
  }
}))

const HelloWorld = (props) => (
  <TextField label="hello" InputProps={{classes: props.classes}} />
)

export default withStyles(styleSheet)(HelloWorld);

// ...

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      focused: {
        color: 'red'
      }
    }
  }
});

[krismartin]

Thank you @oliviertassinari. That is very helpful.

I can get the overriding of MuiFormLabel.focused color working using the createMuiTheme, but the MuiInput.inkbar&:after override doesn't seem to be working.

Here's my code:

const muiTheme = createMuiTheme({
  palette: createPalette({
    primary: blue,
  }),
  overrides: {
    MuiFormLabel: {
      focused: {
        color: 'red'
      }
    },
    MuiInput: {
      inkbar: {
        '&:after': {
          backgroundColor: 'red'
        }
      }
    }
  }
});

I can see the style has been applied properly to the element in dev tool:

But I don't see the red underline when I focus on the field:

[oliviertassinari]

the MuiInput.inkbar&:after override doesn't seem to be working.

@krismartin I confirm, there is an issue here

[oliviertassinari]

@krismartin We are doing a deep merge now. I'm expecting the issue to be fixed.

[rachit1994]

I am facing the same problem but it is not getting resolved on browser refresh.
I am using React-boilerplate I created a MUIContainer and wrapped the App inside MuiThemeProvider

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import withProgressBar from 'components/ProgressBar';
import theme from './material_ui_raw_theme_file';
import App from '../App';


export function MuiContainer(props) {
  return (
    <MuiThemeProvider muiTheme={theme}>
      <App {...props} />
    </MuiThemeProvider>
    );
}

MuiContainer.propTypes = {
  children: React.PropTypes.node,
};

export default withProgressBar(MuiContainer);

material_ui_raw_theme_file:

import { fade } from 'material-ui/styles/colorManipulator'
import * as Colors from 'material-ui/colors';
import { spacing, getMuiTheme } from 'material-ui/styles';

console.log('colors', Colors);

const rawBaseTheme = {
  ...spacing,
  palette: {
    primary: Colors.blue,
    accent: Colors.green,
    textColor: Colors.common.darkBlack,
    alternateTextColor: Colors.common.white,
    canvasColor: Colors.common.white,
    borderColor: Colors.grey,
    disabledColor: fade(Colors.common.darkBlack, 0.3)
  }
};

//Theme must be wrapped in funciton getMuiTheme
export default getMuiTheme(rawBaseTheme);

I am getting the error from getMuiTheme. webpack version: 2.2.0-rc.3
error:

Uncaught TypeError: __webpack_require__.i(...) is not a function
    at eval (eval at ./app/containers/MuiContainer/material_ui_raw_theme_file.js (main.js:1054), <anonymous>:28:131)
    at Object../app/containers/MuiContainer/material_ui_raw_theme_file.js (main.js:1054)
    at __webpack_require__ (main.js:687)
    at fn (main.js:106)
    at eval (eval at ./app/containers/MuiContainer/index.js (main.js:1046), <anonymous>:6:86)
    at Object../app/containers/MuiContainer/index.js (main.js:1046)
    at __webpack_require__ (main.js:687)
    at fn (main.js:106)
    at eval (eval at ./app/app.js (main.js:791), <anonymous>:21:83)
    at Object../app/app.js (main.js:791)

[tonven]

Getting same error after I updated from 1.0.0-beta.3 to 1.0.0-beta.5.
Here is the code:

import * as React from 'react';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import MenuIcon from 'material-ui-icons/Menu';
import { withStyles, createStyleSheet } from 'material-ui/styles';

const styleSheet = createStyleSheet('Header', {
    root: {
        width: '100%',
    },
    flex: {
        flex: 1,
    },
});

const Logged = (props) => (
    <MenuIcon
        {...props}
        iconButtonElement={
            <IconButton></IconButton>
        }
        targetOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
    >
        <MenuIcon primaryText="Refresh" />
        <MenuIcon primaryText="Help" />
        <MenuIcon primaryText="Sign out" />
    </MenuIcon>
);


function Header(props) {
    const classes = props.classes;
    return (<div>
        <AppBar position="static" className={classes.root}>
            <Toolbar>
                <Typography type="title" color="inherit" className={classes.flex}>
                    Predictor
                    </Typography>
                <Button color="contrast">Sign up</Button>
                <Button color="contrast">Login</Button>
            </Toolbar>
        </AppBar>
    </div>);
}

export default withStyles(styleSheet)(Header);

[oliviertassinari]

@Tonvengo have a look at the CHANGELOG.

[tonven]

Ok, thank you. Changed and it works now! 2017-08-17 17:21 GMT+02:00 Olivier Tassinari <[email protected]>:

…

@Tonvengo <https://github.com/tonvengo> have a look at the CHANGELOG. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7238 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARwQ0umLY0kFoUQjkI8_7_SjiSlN-1pCks5sZFqAgaJpZM4OET6c> .

-- With the best regards, Vladimir Shulgin

[leon-yum]

What is the fix for this bug? I'm still running into it: https://stackoverflow.com/questions/47019815/material-ui-getmuitheme-missing-after-upgrading-from-0-9-to-1