Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using a styled(Grid) results in an error from 'RegularBreakpoints'

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

Doing the above is resulting in the following error Exported variable 'StyledGrid' has or is using name 'RegularBreakpoints' from external module "{project_path}/node_modules/@mui/material/Grid/Grid" but cannot be named.

Expected behavior 🤔

If I export RegularBreakpoints the error goes away so I’d expect that or a similar solution.

Steps to reproduce 🕹

Steps:

Create a project with 5.8.4 of @mui/material
Create a file in the project that has the following code:

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

Context 🔦

No response

Your environment 🌎

.tsconfig

{
  "compilerOptions": {
    "target": "ES2015",
    "outDir": "./dist/esm/",
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowJs": true,
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react",
    "baseUrl": "./src",
    "lib": ["es2015", "dom.iterable", "es2016.array.include", "es2017.object", "dom", "esnext"],
    "module": "ESNext",
    "removeComments": true,
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "./dist/typings/",
    "downlevelIteration": true,
    "typeRoots": ["./src/typings", "./node_modules/@types", "../../node_modules/@types"],
    "types": ["jest", "node"],
    "skipLibCheck": true
  },
  "files": ["./src/index.tsx"],
  "include": ["./src/**/*"]
}

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:15 (9 by maintainers)

Top GitHub Comments

3reactions

achendrickcommented, Jun 21, 2022

@rejetto is exactly right. You will not see this error if you don’t also update your tsconfig.json to have "declaration": true

All that would need to be done to address this issue would be export interface RegularBreakpoints

1reaction

ZeeshanTambolicommented, Aug 2, 2022

I’ve created a PR for it - #33751

Top Results From Across the Web

TS4023: Exported Variable <x> has or is using name <y> from ...

The compiler is failing to figure out the exact shape of detailRoute , because it does not know the shape of Route ....

Guide to the MUI grid system - LogRocket Blog

MUI enables you to create innovative and responsive layouts. Explore the MUI Grid system and the new features expected with MUI Grid v2....

grid-auto-flow - CSS: Cascading Style Sheets - MDN Web Docs

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into ...

Using Grids - Oracle Help Center

Note: A specific type of grid called an analytic grid can be used exclusively for applications built for the PeopleSoft Analytic Calculation Engine....

An Auto-Filling CSS Grid With Max Columns of a Minimum Size

Here's how the resulting auto-filling CSS grid behaves when it is ... Looking at the source, it's almost the same, with the exception...