I am working with MUI v5.0.6, when I try to use Button component it keep showing me this error message , I tried to install lower version v5.0.5 but it show me the same issue don't know what cause it I also remove node_module folder and install the packages again but nothing fix the issue

Uncaught TypeError: Cannot read properties of undefined (reading 'button')
    at webpackHotUpdate../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState (Button.js:60)
    at transformedStyleArg (createStyled.js:179)
    at handleInterpolation (emotion-serialize.browser.esm.js:137)
    at serializeStyles (emotion-serialize.browser.esm.js:262)
    at emotion-styled-base.browser.esm.js:110
    at emotion-element-99289b21.browser.esm.js:35
    at renderWithHooks (react-dom.development.js:14985)
    at updateForwardRef (react-dom.development.js:17044)
    at beginWork (react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRoot (react-dom.development.js:24444)
    at react-refresh-runtime.development.js:284
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263)
    at RefreshUtils.js:62

after the above error it show me this error too

    The above error occurred in the <MuiButtonRoot> component:
    at http://localhost:3001/static/js/vendors~main.chunk.js:610:73
    at Button (http://localhost:3001/static/js/vendors~main.chunk.js:9176:86)
    at InnerThemeProvider (http://localhost:3001/static/js/vendors~main.chunk.js:12696:74)
    at ThemeProvider (http://localhost:3001/static/js/vendors~main.chunk.js:12278:5)
    at ThemeProvider (http://localhost:3001/static/js/vendors~main.chunk.js:12716:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

This is my code in react

import React from 'react';
import logo from './logo.svg';
import { ThemeProvider} from '@mui/material/styles';
import Button from '@mui/material/Button';
import { createTheme } from '@mui/system';
import './App.css';

function App() {
  let theme = createTheme({
    palette: {
      primary: {
        main: '#00ff00',
        dark: '#0fff00',
        light: '01fff0',
      },
    },
  });
  return (
    <ThemeProvider theme={theme}>
    <Button>change lange to en</Button>
  </ThemeProvider>
  );
}

export default App;

My dependencies

"dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@mui/material": "^5.0.6",
    "@mui/system": "^5.0.6",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4",
    "workbox-background-sync": "^5.1.3",
    "workbox-broadcast-update": "^5.1.3",
    "workbox-cacheable-response": "^5.1.3",
    "workbox-core": "^5.1.3",
    "workbox-expiration": "^5.1.3",
    "workbox-google-analytics": "^5.1.3",
    "workbox-navigation-preload": "^5.1.3",
    "workbox-precaching": "^5.1.3",
    "workbox-range-requests": "^5.1.3",
    "workbox-routing": "^5.1.3",
    "workbox-strategies": "^5.1.3",
    "workbox-streams": "^5.1.3"
  },

CodePudding user response：

I figure the issue so I will put the solution for anyone else

my VSCode auto import this

import { createTheme } from '@mui/system';

This is hard to notice so it should be imported like this

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

CodePudding user response：

import { createTheme } from '@mui/system';

The theme created by createTheme in @mui/system is a generic theme that has no tie with the Material design. Specifically in your case, the theme is missing the typography property which is a concept from Material. When you want to override the default theme and use MUI components, you need to import createTheme from:

import { createTheme } from '@mui/material/styles';