'React Material-UI - MUI: Expected spacing argument to be a number or a string, got [object Object]

I have a general MUI-core debugging/support question, and as instructed by the official documentation I am posting it here.

While working on a large project I can't isolate the cause of the following error message in the console:

MUI: Expected spacing argument to be a number or a string, got [object Object].

I found this issue in the official repository, suggesting that I am setting a spacing value where I shouldn't be, but I can't figure out where exactly. Commenting out all elements in the JSX doesn't help - a blank rendered page still returns the error.

The console output is not helpful, as it's not pointing to the file containing the error:

MUI: Expected spacing argument to be a number or a string, got [object Object]. spacing.js:56
    createUnaryUnit spacing.js:56
    spacing createSpacing.js:26
    spacing createSpacing.js:25
    onUpdate jss-plugin-rule-value-function.esm.js:58
    onUpdate jss.esm.js:1337
    updateOne jss.esm.js:983
    update jss.esm.js:959
    update jss.esm.js:1245
    attach makeStyles.js:120
    useStyles makeStyles.js:233
    useSynchronousEffect makeStyles.js:187
    useStyles makeStyles.js:225
    WithStyles withStyles.js:56
    React 14
    js index.js:7
    factory react refresh:6
    Webpack 3

Question: how do I debug this? Ideal answer would contain a list of things to check. I can't provide the source code.

debuggingmaterial-ui


Solution 1:[1]

Upon closer examination the console output did point to invocation of

WithStyles withStyles.js:56

I have found the withStyles wrapper in the export line of the application root component: that's why removing all of the elements in the tree did not prevent the error message from appearing.

I could then isolate the problem to the following property of styles argument that was being passed to withStyles:

  toolbar: {
    display: "flex",
    alignItems: "center",
    marginTop: theme.spacing,
    justifyContent: "flex-end",
    padding: "0 8px",
    ...theme.mixins.toolbar
  },

The particular style entry causing the issue was:

marginTop: theme.spacing,

theme.spacing is a function, and should have been called with parenthesis.

The following answers my question:

  • Inspect console output by expanding the error message
  • Inspect each entry in the call stack for clues as to where the error may be, corresponding each call to framework features that you use in your code

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tonysepia

Related Questions