Small TypeScript error after upgrading from 5.0.4 to 5.0.5

[doberkofler]

• 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 😯

After upgrading to the latest 5.0.5 version the following TypeScript code reports an error src/pages/AboutPage/index.tsx:9:30 - error TS7031: Binding element 'theme' implicitly has an 'any' type.

import React from 'react';
import {Stack, Paper, Typography, Box} from '@mui/material';
import {styled} from '@mui/material/styles';
import useDocumentTitle from '../../hooks/useDocumentTitle';
import getSysInfo from './sysinfo';

const pageTitle = 'About';

const Item = styled(Paper)(({theme}) => ({
	...theme.typography.body2,
	padding: theme.spacing(1),
	textAlign: 'left',
	color: theme.palette.text.secondary,
}));

Expected Behavior 🤔

No error as before

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 92.19 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    npm: 8.1.1 - ~/.nvm/versions/node/v16.12.0/bin/npm
    Watchman: 2021.10.11.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
    Homebrew: 3.2.16 - /usr/local/bin/brew
    pip3: 21.2.4 - /usr/local/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    CMake: 3.21.3 - /usr/local/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.30.1 - /usr/bin/git
    Clang: 13.0.0 - /usr/bin/clang
    Subversion: 1.14.1 - /usr/local/bin/svn
  Servers:
    Apache: 2.4.48 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.8 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.61.2 - /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.10 - /usr/bin/javac
    Perl: 5.34.0 - /usr/local/bin/perl
    Python: 3.9.7 - /usr/local/bin/python
    Python3: 3.9.7 - /usr/local/bin/python3
    Ruby: 2.6.8 - /usr/bin/ruby
  Databases:
    SQLite: 3.36.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 95.0.4638.54
    Safari: 15.1

[mnajdova]

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

Could be related to #29293

[doberkofler]

@mnajdova I wanted to provide a CodeSandbox example but cannot seem to understand how to enable strict mode in TypeScript or how to change the tsconfig.json file?

[timothyarmes]

I'm having exactly the same issue. I have a Next.js project using Mui and it fails with this error when running yarn build.

ESLint is also picking up the error.

[karthik1704]

i'm also having same issue,

In 5.0.4

after updating to 5.0.5

• type changed var theme:Theme & Theme to var theme:any

sandbox link: https://codesandbox.io/s/theme-any-bug-7eith?file=/src/Demo.tsx

[ifeanyiisitor]

Also having this issue after upgrading to 5.0.5 on a nextjs project
In my case, styled form import { styled } from '@mui/system'
is resolving to any type

[timothyarmes]

It's actually very hard to go backwards. When I force version 5.0.4 I still get the error. It turns out that @mui/material v5.0.4 will happily fetch version @mui/[email protected], and this causes the error.

Simply Installing @mui/system@=5.04 using yarn does NOT fix it, and yarn why gives the reason:

macpro:frontend Tim$ yarn why @mui/system
yarn why v1.19.2
[1/4] 🤔  Why do we have the module "@mui/system"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@mui/[email protected]"
info Has been hoisted to "@mui/system"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "1.28MB"
info Disk size with unique dependencies: "5.62MB"
info Disk size with transitive dependencies: "6.75MB"
info Number of shared dependencies: 20
=> Found "@mui/material#@mui/[email protected]"
info This module exists because "@mui#material" depends on it.
info Disk size without dependencies: "1.39MB"
info Disk size with unique dependencies: "5.73MB"
info Disk size with transitive dependencies: "6.87MB"
info Number of shared dependencies: 20

So I end up with two version of @mui/system.

And it turns out that @mui/system is the culprit. I can actually keep @mui/[email protected] (latest), but I have to force @mui/[email protected] using yarn's resolutions:

  "resolutions": {
    "@mui/system": "=5.0.4"
  }

And now I can build again :)

[Edelf]

Facing the same error.

[arunmmanoharan]

Facing the same error.

@timothyarmes suggestion works. Try that.

[danistomi]

@timothyarmes suggestion works but similar workaround can't be done with npm.

[httpete]

i'm also having same issue,

In 5.0.4

after updating to 5.0.5

• type changed var theme:Theme & Theme to var theme:any

sandbox link: https://codesandbox.io/s/theme-any-bug-7eith?file=/src/Demo.tsx

absolutely same thing here. 5.0.3 works fine.

[omarefg]

I think the issue could be in packages/mui-system/src/createStyled.d.ts.

I installed version 5.0.5 and replace the file content with the one in 5.0.4 and it works perfectly.

[mnajdova]

Can somebody share their tsconfig.json?

[timothyarmes]

Can somebody share their tsconfig.json?

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

[doberkofler]

Can somebody share their tsconfig.json?

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "noEmit": true,
    "downlevelIteration": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": false,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "useUnknownInCatchVariables": true,
    "exactOptionalPropertyTypes": true,
    "esModuleInterop": true,
    "declaration": false,
    "importHelpers": true,
    "moduleResolution": "node",
    "target": "es2017",
    "module": "esnext",
    "jsx": "react",
    "baseUrl": "../",
    "outDir": "../temp",
    "removeComments": true,
    "lib": [
      "dom"
    ]
  }
}

[mnajdova]

@eps1lon looks like the issue is coming because we didn't do a release of a new version of the @mui/styled-engine and @mui/styled-engine-sc when releasing 5.0.5., but there were changes in them related to typings coming from #29035

• https://www.npmjs.com/package/@mui/styled-engine
• https://www.npmjs.com/package/@mui/styled-engine-sc