Match Media Empty Theme

[mod-flux]

I'm having issues with the match-media package and was curious if anyone has come across any issues or know a fix. I've searched GitHub but it doesn't appear anyone has come across this issue before.

I'm using Theme-UI in a Next.js project and whilst the useResponsiveValue() and useBreakpointIndex() functions work in my component, I noticed that my custom breakpoints were being ignored and only default ones were being used. It's worth mentioning in all other uses of the [] syntax for breakpoint styling, works as expected with my custom breakpoints in my theme object.

I thought perhaps the context.theme didn't exist, which is what match-media relies on for the theme object. I tested this theory by doing the following:

import { useThemeUI } from 'theme-ui'

const Component = () => {
  const {theme} = useThemeUI()
  
  console.log(theme) // correctly logs my custom theme containing custom breakpoints

  const foo = useResponsiveValue([false, null, true]) // receives a theme object of {} and therefore uses the default breakpoints :-(
}

Am I missing something anyone can suggest?

[hasparus]

@mod-flux, could you paste your lockfile here? If a context doesn't exist it's most often a version mismatch between Theme UI or Emotion.

[hasparus]

Okay, another thing I'd try is opening React devtools and counting all context providers from Theme UI to see where's my theme.

[mod-flux]

@hasparus figured out the problem or at least a solution. We've rolled our own patch-package for @theme-ui/media-match to fix it. Essentially in just changing the imports at the top of the index.js in match-media from import { useThemeUI } from '@theme-ui/core' to import { useThemeUI } from 'theme-ui' it all works as intended. Apparently due to the library importing from @theme-ui/core it was using a different context to that of our website which was using theme-ui, oddly.

We have no idea why this works but appears to do the trick.

[hasparus]

This would suggest that we have multiple copies of @theme-ui/core in node_modules 🤔

But useThemeUI is only defined once (in core) and reexported in theme-ui...

I'm not sure if it was the cause of the problem, but match-media had broken peer deps.

I've updated this peerDependency, and I'm deploying a new canary release, but I'm not sure if it helps.

While I still have you here, could you tell me if the following if both useThemeUI imports are referentially equal in your project?

import { useThemeUI as one } from 'theme-ui'
import { useThemeUI as two } from '@theme-ui/core'

console.log(one === two)

[mod-flux]

@hasparus I have exciting news! Your fix appears to have fixed the issue and furthermore, I've tested it using the above method, and everything matches in Storybook and our site. It looks like the lower version of the peerDepedency was throwing things out :-)

Thanks for fixing it, appreciate it!

[hasparus]

Thanks! I'm glad it works for you! Though that's bad news... After so many years it turns out I don't know how peer deps work 🤦