[styles] Cannot read pxToRem of undefined

[SomervilleTom]

My attempt to migrate from v4 to v5 has broken my app. The stack trace of the multiple errors suggests that they originate from issues within the @mui components themselves. I have only limited ability to debug issues within the node_modules subdirectory tree.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Here is a screenshot after following the upgrade recipe:

Expected Behavior 🤔

Here is a screenshot of the v4 behavior:

Steps to Reproduce 🕹

Steps:

1. Contact me so that I can launch the app
2. Attempt to connect at https://covid.tms-dev.zeetix.com

Context 🔦

I've built an interactive data browser that currently uses up-to-date covid data. Other apps will follow.

I consciously use the Google Material UIX in order to optimize the user experience of my visitors, users, and clients.

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 3.10 CentOS Linux 7 (Core)
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 90.0.4430.72
    Firefox: support!
Mozilla Firefox 78.9.0esr
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.46 
    @mui/icons-material: ^5.0.0 => 5.0.0 
    @mui/material: ^5.0.0-rc.1 => 5.0.0-rc.1 
    @mui/private-theming:  5.0.0-rc.1 
    @mui/styled-engine:  5.0.0-rc.1 
    @mui/styles: ^5.0.0-rc.1 => 5.0.0-rc.1 
    @mui/system:  5.0.0-rc.1 
    @mui/types:  7.0.0-rc.1 
    @mui/utils:  5.0.0-rc.1 
    @types/react:  17.0.3 
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    typescript: ^4.1.3 => 4.2.4 

The above screenshots are from a Chrome browser running on Windows 10 Pro. The browser is running Version 93.0.4577.82 (Official Build) (64-bit).

[siriwatknp]

Seems like some of your components are not wrapped within ThemeProvider, that's why it cannot read values inside theme. Here is a similar issue in troubleshooting section

I am happy to help if you could provide code sample or the repo that I can take a look.

[eps1lon]

Seems like some of your components are not wrapped within ThemeProvider, that's why it cannot read values inside theme

Components shouldn't need to be wrapped in a ThemeProvider. Only if you want a different theme.

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[TTMoon]

I have the same problem.

CodeSandbox

[SomervilleTom]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Can you deal with a bitbucket git repo? I'll see if I can abstract something useful in the meantime.

[siriwatknp]

I have the same problem.

@TTMoon

Thanks for the codesandbox. The correct way is to use `import { styled } from '@mui/material/styles', here is the working sandbox. May I ask where do you get the code sample from because it is from our documentation, we will need to fix it.

[TTMoon]

@siriwatknp

Thank you for your quick answer.
I solved the problem.

I referred to this page. link

[SomervilleTom]

I think I've solved the issue. The main issue seems to be a simple error on my part. It appears to me that there is also an issue in the v4-to-v5 migration page (https://next.material-ui.com/guides/migration-v4/).

In my code, I missed the theme={theme} prop assignment in the ThemeProvider setup section.

There are some other issues in the code sample that contributed to my confusion. Here is the code sample as presented in the documentation:

import { ThemeProvider, createMuiTheme, makeStyles } from '@mui/material/styles';

const theme = createMuiTheme();

const useStyles = makeStyles((theme) => {
  root: {
    // some css that access to theme
  }
});

function App() {
  const classes = useStyles(); // ❌ If you have this, consider moving <ThemeProvider> to HOC and wrap the App
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

The first issue is that this code, as provided, fails to compile because @mui/material/styles has not yet been installed (according to the recipe). I went ahead and did the installation suggested in the following section.

The second issue is that, even with the new material installed, the makeStyles method is not exported, and so the provided definition of useStyles can't compile. Which is fine, because it is defining a function that shouldn't be called anyway!

I suggest at least commenting out the useStyles call in the example, or removing it altogether and putting the explanation in a note. When that call to useStyles is absent, then its definition can be removed. This, in turn, means that makeStyles can be removed from the import line.

Here is the analogous code from my app.js that now works:

/**
 * App.js
 * @copyright: 2021 by Thomas M. Stambaugh & Zeetix, LLC (http://www.zeetix.com)
 * All rights reserved.
 * 
 * The contents of this file may not be copied, duplicated, or used without the
 * written consent of Zeetix, LLC.
 * Uses CssBaseline to reset margins, paddings, and so on.
 *
 */
import React from 'react';
import { CssBaseline } from '@mui/material';
import { ThemeProvider, createMuiTheme } from '@mui/material/styles';
import { useAuth0 } from "@auth0/auth0-react";
import Loading from '../auth0/Loading';

import AppContainer from './AppContainer';
const theme = createMuiTheme();

const App = () => {
  const { isLoading } = useAuth0();
  if (isLoading) {
    return <Loading />
  }

  return (
    <ThemeProvider
      theme={theme}
    >
      <CssBaseline />
      <AppContainer
      />
    </ThemeProvider>
  );
};

export default App;

I apologize for the jerk-around -- I suspect that adding the theme={theme} to the ThemeProvider wrapper fixed my issue.

[siriwatknp]

There are some other issues in the code sample

Thanks for the input, I will open a fix for this.

[oliviertassinari]

Components shouldn't need to be wrapped in a ThemeProvider. Only if you want a different theme.

@eps1lon Ideally this wouldn't be needed but it changed in v5. Now, the @mui/styles package is not aware of the default Material Design theme. We couldn't find a better tradeoff with Marija when we worked on moving the JSS dependency out of the @mui/material package.

If we see more complaints on this pain, maybe we could log a warning when developers use the (theme) => API with an empty theme? @mnajdova

[ZHUZZCODER]

May I ask if this problem has been solved

[mnajdova]

May I ask if this problem has been solved

Based on the comments it seems like it has been solved. Please open a new issue with a reproduction if face similar problem.