Skip to content

Update material-ui monorepo (major) #2770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
renovate wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −6
Open

Update material-ui monorepo (major) #2770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontends/main/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"@mitodl/course-search-utils": "^3.5.2",
"@mitodl/mitxonline-api-axios": "2026.5.1",
"@mitodl/smoot-design": "^6.27.0",
"@mui/material": "^6.4.5",
"@mui/material-nextjs": "^6.4.3",
"@mui/material": "^9.0.0",
"@mui/material-nextjs": "^9.0.0",
"@opentelemetry/api": "^1.9.1",
"@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
"@opentelemetry/resources": "^2.6.1",
Expand Down
8 changes: 4 additions & 4 deletions frontends/ol-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/base": "5.0.0-beta.70",
Copy link
Copy Markdown

@sentry sentry Bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The Dialog component uses the TransitionComponent prop, which was removed in Material-UI v7, and will cause runtime errors or break transition animations.
Severity: CRITICAL

Suggested Fix

In Dialog.tsx, replace the deprecated TransitionComponent={Transition} prop with the new slots API: slots={{ transition: Transition }}. Also, verify that the TransitionProps import from @mui/material/transitions is still valid in v7 and update its path if necessary.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: frontends/ol-components/package.json#L22

Potential issue: The application is being upgraded to Material-UI v7, which removes the
`TransitionComponent` prop from components like `Dialog`. The code in `Dialog.tsx` at
line 132 continues to use this deprecated prop: `TransitionComponent={Transition}`. When
a dialog is opened, this will either cause a runtime error because the prop is
unrecognized or the prop will be silently ignored, causing the transition animation to
fail. This will affect all dialogs in the application, including `FormDialog`,
`EmailSettingsDialog`, `UnenrollDialog`, and others that rely on this component.

Copy link
Copy Markdown

@sentry sentry Bot Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The code uses deep imports for @mui/base components, which is a deprecated pattern that is incompatible with the MUI v7 upgrade and may cause build failures.
Severity: MEDIUM

Suggested Fix

Update all deep imports from @mui/base to be top-level imports. For example, change import { FocusTrap } from "@mui/base/FocusTrap" to import { FocusTrap } from "@mui/base". Additionally, consider upgrading @mui/base to v7 to maintain version consistency across all MUI packages.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: frontends/ol-components/package.json#L22

Potential issue: The codebase is being upgraded to MUI v7, but the `@mui/base` package
remains at v5. The code uses deep imports, such as `import { FocusTrap } from
"@mui/base/FocusTrap"`, in files like `NavDrawer.tsx` and `Popover.tsx`. According to
the MUI v7 migration guide, deep imports are no longer supported and should be replaced
with top-level imports. This inconsistency between the import style and the upgraded MUI
ecosystem could lead to build failures or module resolution errors, as the build tooling
from v7 packages may enforce stricter import rules.

"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
"@mui/material": "^6.4.5",
"@mui/material-nextjs": "^6.4.3",
"@mui/system": "^6.4.3",
"@mui/lab": "7.0.0",
Copy link
Copy Markdown

@sentry sentry Bot Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: TabList, TabContext, and TabPanel are re-exported from @mui/lab, but in MUI v7 they were moved to @mui/material. This will cause import errors.
Severity: CRITICAL

Suggested Fix

Update the export statements in frontends/ol-components/src/index.ts to import TabList, TabContext, TabPanel, and their corresponding Props types from @mui/material instead of @mui/lab.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: frontends/ol-components/package.json#L23

Potential issue: The upgrade to Material-UI v7 moves the `TabList`, `TabContext`, and
`TabPanel` components from the `@mui/lab` package to `@mui/material`. However,
`frontends/ol-components/src/index.ts` continues to re-export these components from
their old location in `@mui/lab`. Since they no longer exist at that path, any part of
the application that imports them from `ol-components`, such as `DashboardLayout.tsx`,
will fail with an import error at runtime, preventing the application from loading
correctly.

"@mui/material": "^9.0.0",
"@mui/material-nextjs": "^9.0.0",
"@mui/system": "^9.0.0",
"@remixicon/react": "^4.2.0",
"@tanstack/react-query": "^5.66.0",
"@testing-library/dom": "^10.4.0",
Comment thread
sentry[bot] marked this conversation as resolved.
Expand Down
Loading