Minified React error #418 and double loaded css file

[kmergen]

What version of Remix are you using?

1.7.1

Steps to Reproduce

I try to rewrite my app from nextjs to remix. I get the o. a. error in Chrome console. I also see in the network tab that my global css file is double loaded.

To reproduce please see your example application https://remix-ecommerce.fly.dev/en/search.

Expected Behavior

no console error and no double loaded css

Actual Behavior

see screenshot.

[kogan007]

This is happening to me as of right now too, and it didn't before. Those errors show up in my console on the ecommerce demo as well.

[vishnu-acodez]

@kogan007 Did you find the soution?

[sylvainDNS]

I had this error and fixed it with the eslint rule: '@typescript-eslint/no-duplicate-imports': 'error'. In two files, I had duplicated import like this :

import { Icon } from '@chakra-ui/react'
import { Link } from '@chakra-ui/react'

Now there is no longer error in the build 🥳

Edit: didn't solve, the bug is always present in a random way, I suspect a bad interaction with a browser extension, but I don't have time to dig deeper into this problem.

[machour]

@kmergen website seems to be working fine, I think you found the culprit and fixed it. Closing this issue for now, don't hesitate to share the fix!

[WesleyYue]

I'm seeing this as well, and this only happens on production (when the files are minimized). My dev environment runs fine. Did anyone here find the issue?

[mateosantosdev]

Same error here on production

[huyb1991]

I got the same issue on Production

[WillSmithTE]

Likewise seemingly randomly happening on production

[jdnichollsc]

Hey folks, we're getting the same error from our DEV environment:

chunk-OELJV5DJ.js:8 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at $a (chunk-OELJV5DJ.js:8:44889)
    at Ha (chunk-OELJV5DJ.js:8:39459)
    at Qf (chunk-OELJV5DJ.js:8:39390)
    at el (chunk-OELJV5DJ.js:8:39250)
    at Ai (chunk-OELJV5DJ.js:8:35673)
    at Va (chunk-OELJV5DJ.js:8:34629)
    at _l (chunk-OELJV5DJ.js:1:1743)
    at MessagePort.gl (chunk-OELJV5DJ.js:1:2133)

Can you reopen this issue please? <3

[raufabr]

I'm having the same issue at the moment - I'm using Remix with Hydrogen and certain browser extensions, such as Lightdash are causing the app to crash.

[kocyigityunus]

in our case, it was happening because we were trying to push some current time info to the dashboard. which explains why it's random. sometimes server rendered and hydrated data matches, sometimes don't.

[sylvainDNS]

I finally found the problem: like @raufabr it was a browser extension that broke the first render (Dark Reader extension, that inject css to provide dark theme)

[agoyal118]

How can I see the non-minified error?

[kiliman]

Click on the link in the dev console to see the full error message.

[dkkazmierczak]

I guess as well as @sylvainDNS it can be a browser extension, when you go to incognito the issue disappear.

[abstain23]

I got same error, but when you go to incognito the issue disappear..

[muhajirdev]

Did you fix the issue @abstain23 ?

[nigellima]

Getting the same issue here, only in production. And the error happens in any browser I've tried, including in Incognito.

Any ideas?