Using `React.ComponentProps` on the component created by `styled` cause significant delay in compilation

Open
#36,391 5 comments 1 reaction 1 assignee View on GitHub

@mnajdova is already working on this.

Since Mar 2, 2023.

Assessment

This issue has not been assessed yet.

Description

performance scope: system typescript
Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

Link to live example:

A minimum repro can be seen here:

https://github.com/chance-an/styled_repro

Steps:

  1. git clone the repository above
  2. run npm install
  3. run npm run build

Despite its simplicity, significant time was taken to compile the project.

If we comment out this line in index.tsx

const TestComponent = (props: React.ComponentProps<typeof StyledContainer>) => {

And uncomment this line

const TestComponent = (props: any)

the build can finish very quickly.

Separately, if we don't use styled from @mui/system/styled but use the one from @emotion/styled the issue goes away, and the project will be built very quickly as well.

Current behavior 😯

The project builds very slowly with the introduction of React.ComponentProps on the component returned by the styled of the @mui/system package.

This is a reduced example from an actual React project. In the full project, using React.ComponentProps on the component returned by styled will incur a javascript heap out of memory after a significantly prolonged compilation process.

For the minimum repro though, I cannot reproduce the javascript heap out of memory error, but only the slow compilation.

In the meantime, if an IDE like VS Code is being used, the editor also takes a significant amount of time loading intellisense. A "Code Helper" (Used by VS Code) process takes 100% CPU cycles at the same time. So it looks like VS Code's ts compiler is also stressed out.

Expected behavior 🤔

Using styled from @mui/system/styled should have a similar compilation performance as the one from @emotion/styled.

Context 🔦

A developer should be able to use styled and React.ComponentProps to extract the props of the produced component correctly without slowing down the compilation or crashing the node heap.

Your environment 🌎
npx @mui/envinfo 
  No particular browser is involved with this issue. It's a compile-time issue.
  
  Output from `npx @mui/envinfo` goes here.
  
  System:
    OS: macOS 13.1
  Binaries:
    Node: 19.0.1 - ~/.nvm/versions/node/v19.0.1/bin/node
    Yarn: Not Found
    npm: 8.19.2 - ~/.nvm/versions/node/v19.0.1/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: Not Found
    Firefox: 106.0.5
    Safari: 16.2
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.