Next.js: Edge 18 window fully reloads or fails to redirect to another page.

[ArtyomResh]

Bug report

Describe the bug

If you use styled-jsx and have nested media rules in the css, then in Edge 18, the browser window fully reloads or fails to redirect to another page.

To Reproduce

I created an example repository using the npx create-next-app command.

In the example repository, I have added a couple of simple pages and links to them in <Nav />. The links are made using the <Link /> component from next/link. There are nested media expressions in the <Nav /> component.

To reproduce bug, you need to:

1. Open home page.
2. Try clicking the Boo or Foo link in the navigation bar.
3. The window will be completely reloaded or you will get an error.
4. If none of the issues described in paragraph 3 occur, go back to the previous page and repeat step 2.

Expected behavior

Window should be redirected without fully page reload or error.

Screenshots

Full video

System information

• OS: [Windows 10]
• Browser: [Edge 18.18362]
• Version of Next.js: [9.1.4]

Additional context

It happens if you use <Link /> component from next/link for links and only in production mode. It has something to do with optimizeForSpeed option for styled-jsx. If you switch it off bug disappears. Can you explain what exactly optimizeForSpeed doing? What are the consequences if I disable this option on the production?

[timneutkens]

I highly doubt that purple header is part of the template and that these reproduction steps are enough to reproduce. Please provide a full reproduction.

[ArtyomResh]

@timneutkens I'm sorry, I forgot to provide the link to example repo. Here it is:
https://github.com/ArtyomResh/edge-18-nested-media-next-error-example

I will update bug report.

[timneutkens]

Thanks @ArtyomResh 🙏 Added the appropriate labels for someone to investigate.

[Yankovsky]

@timneutkens can you or somebody else provide a bit more info on what optimizeForSpeed do? Does it do anything in runtime?
I've found this file https://github.com/zeit/styled-jsx/blob/d920a289aed3b17acae07bc09dc071be83d99b3e/src/lib/stylesheet.js but it is not very easy for me to figure out what does this option do.

[Yankovsky]

Maybe there is some doc about it?

[giuseppeg]

@yakovlevyuri https://github.com/zeit/styled-jsx#optimizeforspeed it is used in production and when enabled styled-jsx will use the CSSOM API to insert/delete CSS rules instead of using style tags.

I haven't gotten the time to check the testcase but in case anybody wants to take a stab at this, I would add a test here for nested media queries and see if anything is broken https://github.com/zeit/styled-jsx/blob/343795d3b2fef6d3d085921b0d4cf31b4d9be709/test/styles.js#L84

[giuseppeg]

@ArtyomResh this seems to be a bug in Edge. Here is a test case, the sheet.removeRule CSSOM API crashes when removing a nested media query https://jsfiddle.net/7926vas4/ you might want to file a bug to them.

[Yankovsky]

@giuseppeg thanks for investigating! We will file a bug to Edge bug tracker. As I understand the easiest solution while we are waiting for fix is to flatten nested media rules?

[giuseppeg]

As I understand the easiest solution while we are waiting for fix is to flatten nested media rules?

Yeah, that'd work. Thank you for filing the bug! Can you link to it here if you remember?

[ArtyomResh]

@giuseppeg Thank you! I reported about this bug to Microsoft. Here's the link.

[Yankovsky]

For some reason issue is tagged as private in edge's tracker, we don't know how to change it.

[stubbornella]

/cc @gregwhitworth

[timneutkens]

Will close this as it's a browser bug.