Comments (8)
Thinking about it a bit more, it makes sense the initial animation doesn't work because there is no content within Collapse
when its children are lazy-loaded. I'm closing it because the original issue with the infinite loop it's "resolved".
from material-ui.
Wrapping the code inside of collapse with Suspense also fixes the issue (lazy, i guess). But you don't get the very first transition, instead its pop ups. The issue seems to be caused by lazy.
from material-ui.
Lazy loading is also likely another reason why this issue is occuring. But for my project it's necessary otherwise, I'd get these prompts
@tajbowness are you receiving these errors for all components or only those coming from @mui/material
? I'd recommend looking for the root cause.
I've been testing a bit and this is the summary is:
- The issue happens with the combination of
lazy
(withoutSuspense
) +unmounOnExit
. - Wrapping lazy-loaded components with
Suspense
makes the issue disappear but the initial transition is lost. unmountOnExit
with regularly loaded components works fine.- The error is thrown in the
Transition
component from thereact-transition-group
, whichCollapse
uses under the hood. Unclear what causes it.
I'd always recommend wrapping lazy-loaded components in Suspense
, especially the ones displayed after user interaction. See this example adapted from the React docs.
I think we should focus on a more realistic scenario like this one I adapted from your demo: playground. Collapse
wraps a lazy-loaded component wrapped in Suspense
. The problem in this case is that the transition doesn't work when the component is lazy-loaded for the first time.
@siriwatknp @DiegoAndai do you remember similar issues with Material UI transition components?
from material-ui.
Hey @aarongarciah, thanks for the reply!
This error that I mentioned earlier,
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
Has only been occurring with @mui/material
. These are my projects packages
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
This has been the first time I've encountered this error. Having no initial transition isn't much of a concern. But I'm wondering now how to solve the other error (expected a string (for built-in components)
) as it floods my server log and inspect console. Do you have any insight on this?
from material-ui.
@tajbowness can you provide a playground or repo where we can reproduce the Element type is invalid
issue? I wonder if this could be a CJS/ESM issue.
from material-ui.
@tajbowness this could be helpful/related #41960 (comment)
from material-ui.
@aarongarciah I've tried that, unfortunately, it still persists.
I've made some changes and swapped from using lazy to import Tooltip from '@mui/material/Tooltip';
this has solved a couple of issues within my project, which is great, but Element type is invalid
still logs, doesn't impact anything, just only floods the server.
I think you may be right with that it may be a CJS/ESM issue (My project is ESM). I am using Vite, which I believe it doesn't fully support CJS, but I've tried vite-plugin-commonjs
to make them compatible, but it didn't help.
So I'm currently importing like this import Tooltip from '@mui/material/Tooltip';
Doing this, import {Tooltip} from '@mui/material/Tooltip';
, prompts this vite error:
[vite] Named export 'Tooltip' not found. The requested module '@mui/material/Tooltip' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@mui/material/Tooltip';
const {Tooltip} = pkg;
I'm unable to create a repo that reproduces the error, I know that's not very helpful, but it seems the issue is with Vite anyways. What do you think? I think this can be closed.
from material-ui.
I expect issues with Vite + CJS to go away once #30671 is completed cc @DiegoAndai.
I'll rename this issue so we can track the problem with the initial animation when a component is lazy-loaded.
from material-ui.
Related Issues (20)
- Multilevel menu HOT 1
- [Select] Render options below Select's DOM position instead of in a portal HOT 2
- [RFC] Restructure icons exports HOT 2
- [SKELETON] [BUG] Skeleton Height is Unpredictable(Ghost Padding or Margin) Without `variant` Attribute HOT 2
- npm install @mui/styles ERROR HOT 4
- [joy-ui] Temperature check on the future of Joy UI
- [docs-infra] CodeSandbox/StackBlitz broken for demos with relative imports
- test #42499 HOT 1
- [docs] Random Unsplash photo URL is no longer functional HOT 2
- [docs] Add documentation for preventing SSR flicker/FOUC with the Next.js app router HOT 5
- sx prop not work HOT 2
- [v6] Module not found: DefaultPropsProvider/ InitColorSchemeScript HOT 9
- [joy-ui] When using styled('div') all its properties are lost HOT 1
- bug: Preact example is throwing errors HOT 3
- [material-ui][Autocomplete] label cut off when the option list is displayed above. HOT 1
- @mui/material: incorrect responsiveFontSizes return type when using CssVarsTheme as input HOT 2
- [mui-system][material-ui][Grid v2] Stabilize API HOT 6
- [docs][Grid v2] Restructure docs HOT 3
- Some bad ts performance cases HOT 1
- Mui input base text area style is not applied correctly with input props on 5.15.11 from 5.15.10 HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.