Don't warn when matchMedia is not available

[arahansen]

What do you think about removing the warning for matchMedia not being available?

This warning erroneously shows up when running reflex in node environments, like when running tests.

I think the warning's intent is to tell the user they are running reflex in an environment that is not supported, but I think node should be a supported environment for testing and SSR purposes.

[obartra]

I think the warning makes sense, it tells the user "hey where you are running Reflex it won't behave as expected regarding media queries".

But I also agree that the message may not be desired in the cases you mentioned. What about doing one or more of the following:

• Only displaying the error once
• Allowing a custom logger (the user can set log.warn to a no-op)
• Allowing to set the log level (before starting the tests you do something like Reflex.setLogLevel('error'))

[arahansen]

Out of those options I would prefer the setLogLevel one.

But I still feel that we should officially support SSR, and the logging as it is right now suggests that reflex is not intended to be used server side at all.

[obartra]

Ok I'll add an issue for log level, I think we may want that regardless.

I don't have any experience with SSR. Would we want something like "render as if media query was X"? Otherwise we would always default to desktop rendering (even for mobile). If we that then I agree we would want to omit the warning there. If that wouldn't work well, I'm open to any alternatives

[arahansen]

The last comment I'll make on this is that the only env a user would legitimately see this issue is IE9. This is such an edge case in my opinion that it's not even worth logging a warning. I think users will have much more pressing concerns than missing matchMedia support.

[obartra]

Yeah definitely not concerned about IE9 (we only support IE11+).

I'm more concerned about handling SSR in a way that makes sense. What do you think about the setting a default media query to render as approach?

[arahansen]

I think that could work. It gets tricky for serving non-js enabled clients. But that also might be an edge case we don't want to worry about handling right now.

The other issue would be that you'd have a "flash of unresponsive content" where you're on mobile, server serves content intended for desktop, and the content doesnt fix itself until react and js are loaded.

Not sure if you can get enough info from the user agent to determine resolution?

[obartra]

Right, so with this I think the warning makes sense even for SSR when no additional info is provided. But if the consumer (server) says "render using X display alias":

• We push the problem of choosing which resolution is appropriate to the consumer
• We can remove the warning (since it now bypasses the withResolution checks)

I think this makes sense and gets us the best of both worlds (while keeping the message for the cases where it is relevant). I'm not sure about the API though. Is this something we would specify through ConfigProvider? like a "renderAsDisplayAlias" property or something? Or should this be handled differently?

[obartra]

We'll add a defaultDisplay option that if specified will omit the warning and use that one when mediaQuery is not provided. It will also be the default value used if no media query is matching.

[obartra]

After working on #350 I'm unclear omitting the warning when defaultDisplay is set is the way to go. I think omitting the warning by changing the log level is more intuitive. The behavior for handling resolution is already convoluted on its own, I'm weary of adding more code paths for something we can solve differently

[obartra]

🎉 This issue has been resolved in version 16.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀