Upgrade to MUI v7 - #200
Conversation
📝 WalkthroughWalkthroughChangesMUI dependencies were upgraded to v7. Theme augmentation targets were updated. Grid imports now use the direct MUI v7 migration
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
klesaulnier
left a comment
klesaulnier
left a comment
There was a problem hiding this comment.
Missing package-lock.json
# Conflicts: # src/pages/users/modification/user-modification-form.tsx
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/module-mui.d.ts`:
- Around line 13-14: Remove the self-referential export from the declare module
'`@mui/material/styles`' augmentation, leaving only declaration-merging content in
that block. If the module re-export is required elsewhere, move it outside the
augmentation rather than retaining it inside.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: a6483bd7-80f7-4870-8d51-cafb2dd47e3a
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.jsonsrc/module-mui.d.ts
| declare module '@mui/material/styles' { | ||
| export * from '@mui/material/styles'; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
npm run type-checkRepository: gridsuite/gridadmin-app
Length of output: 50379
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf 'Files matching module-mui.d.ts:\n'
fd -a 'module-mui\.d\.ts$' . || true
printf '\nRelevant content:\n'
for f in $(fd 'module-mui\.d\.ts$' .); do
echo "--- $f"
cat -n "$f"
done
printf '\nDependency versions:\n'
node - <<'JS'
const fs = require('fs');
const pkg = JSON.parse(fs.readFileSync('package.json','utf8'));
const deps = {...(pkg.dependencies||{}), ...(pkg.devDependencies||{})};
for (const [k,v] of Object.entries(deps)) {
if (/^(`@mui`\/|typescript)$/.test(k)) console.log(`${k}: ${v}`);
}
JSRepository: gridsuite/gridadmin-app
Length of output: 1894
🌐 Web query:
TypeScript module augmentation export reexport error @mui/material/styles Theme TypeScript
💡 Result:
When working with TypeScript module augmentation for Material UI (MUI), "export" or "re-export" errors—or scenarios where augmentations fail to apply—typically stem from how TypeScript handles module resolution and ambient declarations [1][2][3]. Key causes and solutions include: 1. Missing Import in Declaration Files: If your module augmentation resides in a .d.ts file or a file that is not directly importing the target module, TypeScript may ignore the declaration [1][2]. You must import the target module (e.g., '@mui/material/styles') within your declaration file to ensure TypeScript recognizes the module for augmentation [1][2]. Example: import '@mui/material/styles'; declare module '@mui/material/styles' { interface Theme { status: { danger: string; }; } } 2. Issues with Re-exports and Overriding: TypeScript can sometimes treat re-exports in a way that overrides existing interfaces rather than merging with them [4]. If you are distributing a library containing theme overrides, ensure your augmentation is correctly targeting the original source module (e.g., '@mui/material/styles') rather than a file that re-exports it [4][3]. 3. Library Distribution Challenges: When isolating a theme into a separate library, downstream applications may not automatically pick up the augmentations defined in your package [5][6]. To ensure these types propagate: - Ensure the file containing the declare module block is included in the package's exports or types field in package.json. - Consumers may need to reference the declaration file, sometimes by importing an empty type from the package in their tsconfig.json or a global declaration file (e.g., import type {} from '@your-org/theme-lib/types/mui';) [5][7]. 4. Performance and Circular Dependencies: In newer MUI versions, certain paths (like @mui/material/stylesOptimized) exist to avoid circular dependencies [8]. If you are experiencing persistent issues with type resolution, ensure that your import paths for createTheme and module augmentation match consistently throughout your project [8]. General Troubleshooting Steps: - Verify that your augmentation file is actually being included in the TypeScript compilation (check your tsconfig.json include property). - If using VS Code, restart the TypeScript server (Ctrl/Cmd + Shift + P -> "TypeScript: Restart TS server") to clear cached type definitions. - Always prefer importing the exact module you intend to augment, rather than relying on re-exported paths, to ensure predictable merge behavior [3].
Citations:
- 1: [docs] Add necessary imports to Typescript theme augmentation example mui/material-ui#47425
- 2: [system] Augmenting createTheme typing throws an error mui/material-ui#31864
- 3: Module augmentation with multiple modules when using "export * from" microsoft/TypeScript#46617
- 4: Expected Interface Augmentation, Overrode Interface Instead microsoft/TypeScript#35483
- 5: Export theme augmentation from package mui/material-ui#31097
- 6: https://stackoverflow.com/questions/75022165/how-to-re-export-overridden-mui-theme-definitions
- 7: [Bug or Question] Custom component variants via augmented module is lost when re-export mui/material-ui#35743
- 8: Reexport styles from to improve TS performance mui/material-ui#47069
Remove the self-re-export from the @mui/material/styles augmentation.
MUI’s Theme and ThemeOptions are already exported from this module. TypeScript module augmentations should merge declarations only; keep export * from '@mui/material/styles' outside this block if it is needed at all.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/module-mui.d.ts` around lines 13 - 14, Remove the self-referential export
from the declare module '`@mui/material/styles`' augmentation, leaving only
declaration-merging content in that block. If the module re-export is required
elsewhere, move it outside the augmentation rather than retaining it inside.
2 participants
PR Summary