I have a little tricky setup with Gatsby 1.9 and react-next with React 16.5.2 and Material UI 3.2.2
I have no idea what goes into conflict with what, but basically any time I try to use Radio or RadioGroup components I get this weird error (see below)
Unfortunately, I can't migrate to Gatsby 2.0 for a proper React 16 support.
Maybe somebody can figure out what is the problem exactly and I can then override some dependency version?
Here is the error:
Surprisingly enough, problem was resolved by removing node_modules completely and reinstalling all packages.
Maybe there was some kind of conflict?
Related
Prelude
So, this issue bothers me for a week or so, I dug a lot to try to slove it but with no success.
I understand that the next server probably does't render my styles and I need to inject them, but I tried the suggested solutions and still the problem persists.
Material ui breaks on refresh in Next js
https://github.com/mui/material-ui/blob/master/examples/nextjs/pages/_document.js
Also tried to use next/dynamic with ssr: false which makes a difference but not in the right, direction also with suspense: true and <Suspense fallback="loading"> which in the first place requires react v18+, react-dom v18+ and NextJS v12+ and on the second place breaks on initial load and breaks the styles somehow, so we exclude this as a solution.
https://stackoverflow.com/a/64119607/17016350
More about the problem
Firstly this problem is observed only on the build version of the project, on development enviroment its OK.
What I observe is that when we clear the cache and load a particular page in our project the page gets loaded some elements/components are where they are supposed to be, but others are not, and this is because the styles for them are not loaded yet and this leads to snap of the page.
After that if we reload the page normally everything is where is supposed to be and we do not observe this kind of snapping, on the other hand if we hard reload or reload with clear cache the page snaps.
Versions
next 12.1.5
react 17.0.1 react-dom 17.0.1
#emotion/react 11.8.2 #emotion/styled 11.8.1
#mui/material 5.5.3 #mui/styles 5.5.3
For now I can not include any code or screenshots
It is very new issue and currently its in progress
You can follow these links for updates and information about the problem:
https://github.com/mui/material-ui/pull/32104
mnajdova commented 5 days ago
Let's wait for the next version that
contains the fix in vercel/next.js#36675 (comment) to be stable so
that we can test the changes reliably.
https://github.com/vercel/next.js/issues/36675
zhulduz commented 5 days ago
Version next: 12.1.7-canary.4 works properly for me
https://github.com/mui/material-ui/issues/32051
I will update the answear if any solutions are found...
I'm building React project with Material UI through storybook and facing this error (attached snap)
In my case, I was able to resolve this by removing the use of #rollup/plugin-node-resolve from my rollup.config.js, as it turns out I didn't need it.
That being said, if you do need the node-resolve plugin for other reasons, you may have to monitor the following issues:
https://github.com/mui-org/material-ui/issues/18791
https://github.com/react-component/util/issues/105
I saw this error in the midst of upgrading from MUI 4 to 5 as it relates to my Storybook site. I had followed the upgrade process they outlined, but tried to build before uninstalling MUI 4. This is what convinced that error to stop showing in my case.
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
i am using React-Big-Calender, i want to make my event resizable. I am able to implement dnd of events but somehow events are not resizing. I took reference from official example (https://github.com/jquense/react-big-calendar/blob/master/examples/demos/dnd.js) but still not able to make it work. Please help..!
Link to my codeSandBox : https://codesandbox.io/s/wonderful-darwin-35hq4?file=/src/CalenderIndex.jsx
I recently came across this and it ended up being due to my react and react-dom version being 17.0.1. It looks like they changed how some DOM events are handled (https://reactjs.org/blog/2020/10/20/react-v17.html) which causes the resizing event not to fire in react-big-calendar. The best fix for now is probably just to downgrade react and react-dom in your package.json (I went to "16.13.1" it is working fine)
I think with the latest version of react-big-calendar v0.38.1 everything works fine without any issues even with react and react-dom v17.0.2. I just had a bit of a hard time figuring out that I need to include the dragAndDrop styles import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'; as well otherwise the handlebars for resize are not shown at all.
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.