Emotion (Mui) in Next.js project does not properly apply inline stylesheets in Chrome

Having trouble applying classes from Inline stylesheets generated by emotion(MUI) in the latest Chrome version (v129). The issue is only present in this specific version of Chrome, as it works fine in other browsers and even in Chrome versions <=128.

I have provided two screenshots to illustrate the problem: In Screenshot 1, you can see that a class applied to an svg element is reflected in the styles and therefore applied correctly. However, in Screenshot 2, the same class is not being reflected in the styles, causing it not to work. This issue is also seen with other HTML elements such as fieldset.

Case: Working (Chrome <= v128, Safari, Firefox, Brave) https://drive.google.com/file/d/1ZbFVakFu_2lOFIGiIOmX7UocT0tZaZjc/view?usp=drive_link

Case: Not Working (Only in Chrome v129) https://drive.google.com/file/d/1DfeoHLEdBB27QDGnKtya7HQivVDC6rm1/view?usp=drive_link Any suggestions for a possible solution would be greatly appreciated.

Relavant Tech Stack Next.js: v13 MUI: v5.14

OS Specifications OS: macOS Sequoia (v15.0)

I have tested across multiple browsers and found that it works correctly in Chrome <= v128 but encounters issues only in Chrome v129, as mentioned earlier.

cssreactjsmaterial-uiemotionnext.js14

Answer №1

By following the instructions at this link and executing the command 

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --js-flags=--no-maglev-optimistic-peeled-loops
, I was able to resolve the bug successfully.

Source: here

Update: The issue has been fixed in the latest Chrome release (129.0.6668.71)

Answer №2

After identifying an issue on our website, we conducted research to determine the root cause which turned out to be related to a Chrome update.

To resolve this, we implemented the emotion cache and disabled speedy. For more information, please visit: https://github.com/emotion-js/emotion/issues/3256

Update: The fix has already been implemented in the latest version of Google Chrome. Visit for details.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to utilize the useSWR hook when there are necessary logical operations to be performed on the response before proceeding with the next API call

I am currently utilizing the swr library in a Create React App and require the usage of the useSWR hook for data fetching that is both contingent and conditional. The specific task at hand involves: Making an API call to retrieve an id which will be used ...

javascriptreactjsreact-hooksswr

Throw an error of Type - TypeError when the provided prop is beyond the permissible range

I am working on a component that accepts two props - children (React elements) and index. The purpose of this component is to return the child element at a specific index when the index is passed in. However, I want to enhance my types to throw a type er ...

javascriptreactjstypescript

React-Redux error: Unable to call addItem function

Recently, I started learning about redux by following an E-Commerce site tutorial that uses React and Redux. In the tutorial, there is a CollectionItem Component with a button that triggers an addItem function to add the selected item to the shopping cart. ...

javascriptreactjsreduxreact-redux

How can I ensure the height of the Bootstrap vertical navigation menu appears consistent on every page

I'm struggling to get the vertical navigation menu to reach all the way down to the footer of the page. I've tried adjusting it, but the closest I came was setting a specific height for the .navbar, which isn't ideal because I want it to be ...

htmlcss

Exploring ways to customize the date display in chart.js

Need help with adjusting the date display on my chart? See the chart below: https://i.sstatic.net/aHJtw.png Is there a way to customize how dates are displayed, like showing them horizontally and only every third date? Check out my code snippet below: ...

reactjsapichartsnext.jscoingecko

When increasing the zoom level, the footer becomes oddly centered on the page in Bootstrap 4

I've recently started learning Bootstrap with HTML and CSS. Using the bootstrap grid system, I've created three sections like this. Everything looks good on medium screens or larger. However, a problem arises when viewing on smaller screens (or z ...

htmlcssbootstrap-4

Elevating the parameter in ReactJS: How many levels up?

My goal is to pass the key of the component upstream when there is a change. For example, I have the following code snippet: onChange= {(e) => this.props.onChange(e, key)} The issue arises because this.props.onChange references its own props.onChange ...

javascriptreactjsecmascript-6event-handling

"Implementing a function to automatically input a selected value from a dropdown menu into a text field

I'm facing an issue and need some help. I have a form with one select field and one text field. What I want is for the text field to display a value corresponding to the option selected in the select field. For example, if I choose "B" from the select ...

phphtmlcss

Tips for positioning 2 React Native elements: have one centered and the other aligned to the beginning

Consider the following React Native styles: var styles = StyleSheet.create({ parentView:{ width: 400, height:150 }, containerView:{ flex:1, flexDirection: 'row', alignItems: 'center', justifyContent: &apos ...

cssreactjsreact-nativeflexbox

Is it possible to implement ajax within an onclick function using React?

Is there a way to implement ajax in an onclick function while working with React and display the results within that function? onItemClick(a) { console.log("Button was clicked!"); var desc = Flightdesc.info.departureinformation.routeshow.description ...

ajaxreactjsfunctiononclick

Having trouble with implementing a static URL in CSS

I'm struggling to incorporate a static file into my CSS as a background image for my website. The static URL is functioning properly when tested in HTML, but it's not working when implemented in CSS. HTML: {% extends 'base.html' %} { ...

cssdjango

Is your Z-Index failing to make an impact?

Currently, I am attempting to layer divs on top of a background image. All the elements have designated position attributes, and I have applied a 50% opacity to the background image so that what's behind it is partially visible. Despite setting the z- ...

javascriptjqueryhtmlcss

Discover the method for obtaining the size of a filtered array in React JS

I am having trouble getting the filtered number of cards to display properly. Currently, I can only see the original number of cards displayed. Any help would be greatly appreciated. <div>{cards.length} Results<div> { cards.filter(card = ...

reactjs

What is the reason for the leftward shift of the buttons?

Currently following a Udemy tutorial on Node, React, and Express. The instructor is using a Header component in his code that shifts the Login and Cart links to the far right. I have implemented the same code as instructed, but my links are not aligning t ...

htmlcssreactjsreact-bootstrap

Create a dropdown menu in jQuery by using the prepend trigger

I'm attempting to utilize jQuery to prepend a trigger to a menu and then have that trigger toggle child elements. Unfortunately, the code below is not opening the sub menus when using jQuery prepend. Can anyone provide a suggestion for a fix? HTML & ...

jqueryhtmlcss

utilizing slug value within the main layout of a Next.js application's router

In my NextJS App Router Project, I have organized the file structure as shown below: | | | | | +---app | | | | page.js | | | | layout.js | | | \---spaces | | | | page.js | | | | layout. ...

reactjsnext.jsreact-server-components

Problem with constantly updating React-google-maps component

Encountering some difficulties with the react-google-maps npm package. Initially, everything works perfectly fine upon first rendering. However, when attempting to re-render the map-component, the classic Google Maps error occurs. Uncaught TypeError: Can ...

google-mapsreactjsredux

Aligning a paragraph element within a header

I'm attempting to center the <p> element within the header, but it's consistently misaligned. I attempted placing it in a grid and consulted ChafGpt, but no solution worked. I've also tried enclosing it in a container and applying &qu ...

htmlcss

What is the process of incorporating a code editor into Material UI design?

Despite trying numerous popular code editors from npm, I have encountered an issue where none of them seem to be displaying monospace fonts correctly. Even after attempting solutions like ThemeProvider and inline styles, the problem persists. What's i ...

reactjsmaterial-uicodemirrorace-editor

Achieving a Pushing Footer Design with Content

Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: . Here is my HTML/CSS code for the footer: ...

htmlcssfooter