Material-ui: The create-react-app example does not work: [Theme] spacing function is not recognized.

[lesair]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The example found at material-ui/examples/create-react-app/ should work flawlessly right outside of the box.

Current Behavior 😯

The theme's spacing function is not recognized. The error is caught in the srcpagesindex.js file, line 16:
paddingTop: theme.spacing(20)

The error message is: TypeError: theme.spacing is not a function

Steps to Reproduce 🕹

Links:
Repo forked from the original (no changes made yet).
Sandboxed repo.

1. Gather the create-react-app example project files to start a new React application.
2. Install it and run. For example:

npm install
npm run start

1. You should be able to catch the error by now.

Context 🔦

Just trying to run the example application out of the box.

Your Environment 🌎

According to the package-lock.json file:

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.2 |
| React | v16.8.1 |
| Chrome | v72.0.3626.96 |
| TypeScript | None |
| create-react-app | v3.2.2 |

Root cause hypothesis

Perhaps this issue could be related to #14280 ?

[mbrookes]

Perhaps this issue could be related to #14280 ?

Yes, or more specifically, this PR: #14099

theme.spacing has been updated, however aside from the fact that it hasn't been published in a release yet, the example use latest, not next, so I don't believe thy should have been changed. I'm guessing it was a global search & replace SNAFU.

It should just be a question of checking out examples directory from a prior commit, and committing.

[lesair]

Thank you, Matt. I will try using a previous commit version and we will see how it goes. Just keep in mind the confusion this might cause to newcomers trying to learn Material-UI by running the examples provided in the official documentation.

[oliviertassinari]

Oops, my bad. I think that we should duplicate all our demos targeting latest and next.

[lesair]

Thank you, Olivier.

I will keep an eye on this until it's solved.

[farid64]

I am that newcomer lesair talked about. It works on its own, but when you try to add Dashboard layout to it it throw an error: "theme.spacing is not a function." Because Dashboard.js uses the new thing, but the example does not support it. How can one update the example? I have installed all the latest packages.

[oliviertassinari]

@farid64 You should follow the links in the documentation.

(You need to use the master branch: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js)

[lesair]

@farid64 Make sure you are using the master branch of the examples repo.

[farid64]

Hi. Thanks for responses. I think I did use the master branch. I followed the link from the documentation.
I'm confused. Is the spacing function new feature or using 'theme.spacing.unit * 2' a new feature? Because if you follow the links that you guys sent me, it actually uses the latter method, '..unit * 2'.

Can you clarify?
By the way, I am using the latter method, ' ..spacing.unit *2', and it is working right now.

[oliviertassinari]

theme.spacing.unit is deprecated.

[oliviertassinari]

The new spacing feature is documented in here https://next.material-ui.com/customization/themes/#spacing.

[amcquade]

master branch didnt work for me either. just ended up commenting out the spacing lines.

[rdamus]

@amcquade agreed. just checked out master. same theme.spacing error is thrown when i copy Dashboard.js into a new project and try to use the component as-is

[oliviertassinari]

Can somebody point a line where we do it wrong (using a GitHub URL)?

[rdamus]

sorry, turns out i was on the "next" branch, which _does_ have the error.

the master branch now has the theme.spacing.unit instead of the theme.spacing() call, which differs from the original

from _master_ branch, Dashboard.js:83
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
height: '100vh',
overflow: 'auto',
},

[amcquade]

https://github.com/mui-org/material-ui/blob/02b6dab6032d0bfe9473847c366e5de6731f4d74/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js#L76
https://github.com/mui-org/material-ui/blob/02b6dab6032d0bfe9473847c366e5de6731f4d74/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js#L78
https://github.com/mui-org/material-ui/blob/02b6dab6032d0bfe9473847c366e5de6731f4d74/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js#L95

[oliviertassinari]

@amcquade This is the next branch, how did you arrive here?

[amcquade]

@oliviertassinari neither master nor next branch worked for me.

[icarter09]

@oliviertassinari I just experienced this problem, but the link you provided for the master branch worked for me. Thanks!

[QPark]

I replaced the padding: theme.spacing(1) statements in the
https://github.com/mui-org/material-ui/blob/master/docs/src/pages/premium-themes/paperbase/
example and it worked for me.