search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.28k stars 32.12k forks source link

[material-ui][Box] Error if adding any prop to it #39796

Closed shakib77 closed 9 months ago

shakib77 commented 10 months ago

Duplicates

Latest version

Steps to reproduce 🕹

When using @mui/material in the project nextjs with typescript using Box component produces type error:

TS2590: Expression produces a union type that is too complex to represent

Code Example is

import {Box} from '@mui/material';
import {Avatar} from '@mui/material';

const MyComponent = () => {
  return (
    <Box sx={{display: 'flex', justifyContent: 'flex-start'}}>
      <Avatar
        alt={'profile image'}
        src={'/images/dummy-logo.svg'}
        sx={{
          width: 'auto',
          height: '86px',
          '& .MuiAvatar-img': {
            objectFit: 'contain',
          },
        }}
        src={vendorProfileData?.org_logo_path}
        variant={'square'}
      />
    </Box>
  );
};

export default MyComponent

Current behavior 😯

This Box component produces TS2590: Expression produces a union type that is too complex to represent if add any property

Expected behavior 🤔

The Box component should not produce type error when properties are added

Context 🔦

Primary solution found is 

import MuiBox from '@mui/material/Box';
import {ReactNode} from 'react';

/**
 * Note. This is use for
 * @param Default params of MUI Box

 */

type Props = {
  children: ReactNode;
  [x: string]: any;
};
const Box = ({children, component = 'div', ...rest}: Props) => {
  return (
    <MuiBox component={component} {...rest}>
      {children}
    </MuiBox>
  );
};

export default Box;

but my code base is huge. it will take a lot of time to replace components

Your environment 🌎

package.json

  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "staging:start": "next start admin -p 3000 && next start frontend -p 3001 && next start assessment -p 3002 && next start jre -p 3003 && next start course -p 3004",
    "dev:all": "concurrently \"yarn dev:admin\" \"yarn dev:frontend\" \"yarn dev:assessment\" \"yarn dev:jre\" \"yarn dev:course\"",
    "start:all": "concurrently \"yarn start:admin\" \"yarn start:frontend\" \"yarn start:assessment\" \"yarn start:jre\" \"yarn start:course\"",
    "dev:admin": "env-cmd --verbose -e local next dev admin -p 3000",
    "dev:frontend": "env-cmd --verbose -e local next dev frontend -p 3001",
    "dev:assessment": "env-cmd --verbose -e local next dev assessment -p 3002",
    "dev:jre": "env-cmd --verbose -e local next dev jre -p 3003",
    "dev:course": "env-cmd --verbose -e local next dev course -p 3004",
    "build:admin-local": "env-cmd --verbose -e local next build admin",
    "build:frontend-local": "env-cmd --verbose -e local  next build frontend",
    "build:assessment-local": "env-cmd --verbose -e local  next build assessment",
    "build:jre-local": "env-cmd --verbose -e local  next build jre",
    "build:course-local": "env-cmd --verbose -e local  next build course",
    "build:admin-stage": "env-cmd --verbose -e stage  next build admin",
    "build:frontend-stage": "env-cmd --verbose -e stage  next build frontend",
    "build:assessment-stage": "env-cmd --verbose -e stage  next build assessment",
    "build:jre-stage": "env-cmd --verbose -e stage  next build jre",
    "build:course-stage": "env-cmd --verbose -e stage  next build course",
    "build:admin": "env-cmd --verbose -e prod next build admin",
    "build:frontend": "env-cmd --verbose -e prod next build frontend",
    "build:assessment": "env-cmd --verbose -e prod next build assessment",
    "build:jre": "env-cmd --verbose -e prod next build jre",
    "build:course": "env-cmd --verbose -e prod next build course",
    "docker-build:frontend": " docker build -f ./frontend/Dockerfile  .",
    "docker-build:admin": " docker build -f ./admin/Dockerfile  .",
    "docker-build:assessment": " docker build -f ./assessment/Dockerfile  .",
    "docker-build:jre": " docker build -f ./jre/Dockerfile  .",
    "docker-build:course": " docker build -f ./course/Dockerfile  .",
    "start:admin": "next start admin -p 3000",
    "start:frontend": "next start frontend -p 3001",
    "start:assessment": "next start assessment -p 3002",
    "start:jre": "next start jre -p 3003",
    "start:course": "next start course -p 3004",
    "symlink:create": "mklink /J admin\\public public && mklink /J frontend\\public public && mklink /J assessment\\public public && mklink /J jre\\public public && mklink /J course\\public public",
    "symlink:remove": "rmdir admin\\public && rmdir frontend\\public && rmdir assessment\\public && rmdir jre\\public && rmdir course\\public",
    "symLinkLinux:create": "cp -R public admin && cp -R public frontend && cp -R public assessment && cp -R public jre && cp -R public course",
    "symLinkLinux:remove": "rm -r admin/public && rm -r frontend/public && rm -r assessment/public && rm -r jre/public && rm -r course/public",
    "lint": "next lint",
    "lint:fix": "eslint --fix",
    "format": "prettier --write",
    "cypress:open": "cypress open",
    "react-intl-clear-garbage": "node commands/react-intl.js"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fullcalendar/core": "^6.1.7",
    "@fullcalendar/daygrid": "^6.1.7",
    "@fullcalendar/interaction": "^6.1.7",
    "@fullcalendar/react": "^6.1.7",
    "@fullcalendar/timegrid": "^6.1.7",
    "@hookform/resolvers": "^3.0.1",
    "@mui/icons-material": "^5.14.16",
    "@mui/lab": "^5.0.0-alpha.152",
    "@mui/material": "^5.14.17",
    "@mui/system": "^5.14.17",
    "@mui/x-date-pickers": "^6.18.0",
    "@next/bundle-analyzer": "^14.0.1",
    "@tanstack/react-table": "^8.9.1",
    "@tinymce/tinymce-react": "^4.3.0",
    "@types/lodash": "^4.14.192",
    "axios": "^1.4.0",
    "clsx": "^1.2.1",
    "d3-array": "^3.2.2",
    "dayjs": "^1.11.8",
    "filepond": "^4.30.4",
    "filepond-plugin-file-poster": "^2.5.1",
    "filepond-plugin-file-validate-size": "^2.2.7",
    "filepond-plugin-file-validate-type": "^1.2.8",
    "filepond-plugin-image-crop": "^2.0.6",
    "filepond-plugin-image-edit": "^1.6.3",
    "filepond-plugin-image-exif-orientation": "^1.0.11",
    "filepond-plugin-image-preview": "^4.6.11",
    "filepond-plugin-image-resize": "^2.0.10",
    "filepond-plugin-image-transform": "^3.8.7",
    "js-base64": "^3.7.5",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "next": "^14.0.1",
    "notistack": "^3.0.1",
    "nprogress": "^0.2.0",
    "oidc-client-ts": "^2.2.3",
    "pdfmake": "^0.2.7",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-color": "^2.19.3",
    "react-countdown": "^2.3.5",
    "react-dom": "^18.2.0",
    "react-filepond": "^7.1.2",
    "react-hook-form": "^7.47.0",
    "react-intl": "^6.4.2",
    "react-multi-carousel": "^2.8.4",
    "react-oidc-context": "^2.2.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-player": "^2.11.0",
    "react-popper": "^2.3.0",
    "react-slick": "^0.29.0",
    "react-swr-infinite-scroll": "^1.0.1",
    "react-transition-group": "^4.4.5",
    "reagraph": "^4.8.1",
    "recharts": "2.6.2",
    "slick-carousel": "^1.8.1",
    "swr": "^2.1.5",
    "typescript": "^5.2.2",
    "universal-cookie": "^4.0.4",
    "uuid": "^9.0.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@next/eslint-plugin-next": "^14.0.1",
    "@types/node": "^20.1.2",
    "@types/nprogress": "^0.2.0",
    "@types/pdfmake": "^0.2.2",
    "@types/react": "^18.2.36",
    "@types/react-color": "^3.0.6",
    "@types/react-dom": "^18.2.14",
    "@types/react-slick": "^0.23.10",
    "@types/tinymce": "^4.6.4",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/parser": "^6.10.0",
    "axios-mock-adapter": "^1.21.2",
    "babel-loader": "^9.1.0",
    "concurrently": "^8.2.2",
    "cypress": "^12.12.0",
    "depcheck": "^1.4.7",
    "env-cmd": "^10.1.0",
    "eslint": "^8.53.0",
    "eslint-config-next": "^14.0.1",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.29.0",
    "prettier": "^3.0.3"
  },
"packageManager": "yarn@4.0.1"
}

tsconfig.json

  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2017",
      "ESNext.String",
      "ES2021.String"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "modules/admin/certificate/editor/compontents/EditorMenuPanel/ImageProperties"
  ],
}
mj12albert commented 10 months ago

@shakib77 In your snippet, you have repeated the src prop twice in Avatar which is probably the cause

<Avatar
  alt={'profile image'}
  src={'/images/dummy-logo.svg'}
  sx={{
    width: 'auto',
    height: '86px',
    '& .MuiAvatar-img': {
      objectFit: 'contain',
    },
  }}
  src={vendorProfileData?.org_logo_path} // <---- this looks like the problem 💥 
  variant={'square'}
/>

Otherwise I cannot reproduce it: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39796-prm932?file=/src/App.tsx

shakib77 commented 10 months ago

@shakib77 In your snippet, you have repeated the src prop twice in Avatar which is probably the cause

<Avatar
  alt={'profile image'}
  src={'/images/dummy-logo.svg'}
  sx={{
    width: 'auto',
    height: '86px',
    '& .MuiAvatar-img': {
      objectFit: 'contain',
    },
  }}
  src={vendorProfileData?.org_logo_path} // <---- this looks like the problem 💥 
  variant={'square'}
/>

Otherwise I cannot reproduce it: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39796-prm932?file=/src/App.tsx

@mj12albert It is my mistake in Avatar component but I am facing this all over in box component if i add any properties.

mj12albert commented 9 months ago

@mj12albert It is my mistake in Avatar component but I am facing this all over in box component if i add any properties.

Could you please provide an updated repro? You can fork this template: https://mui.com/r/issue-template-latest

github-actions[bot] commented 9 months ago

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

ChristopherTrimboli commented 9 months ago

this is legit, just setup new repo, even using new v14 cache provider, I get same:

image

Expression produces a union type that is too complex to represent.ts(2590)

chrisdemetriad commented 7 months ago

image

TS 5.3.3.

cmionGrappa commented 6 months ago

It really is legit, I'm also facing it, using ts 5.3.3 and @mui/material: "^5.15.13",