Emotion: Theme is empty when importing component outside the Gatsby root

[moroshko]

I'm building a component library alongside a Gatsby demo website. The component library is styled with Emotion + theming.

Here is the basic folder structure I have:

  components
    button.js
website
  src
    components
      layout.js
    pages
      index.js

My problem is that the button doesn't get the theme (the theme appears to be {}).

However, if I move the button to website/src/components, the theme gets to the button as expected.

See repro here.

What am I missing here?

[dmfilipenko]

Same history. I'm developing a project as monorepo.

    |_components
    |_project

when I import component from components folder, theme object is empty, when a component placed in project folder everything works as expected

[lloydh]

I'm having exactly the same issue trying to migrate to Emotion 10.

I built a UI library with Emotion 9 that is used by two Gatsby sites. The library was compiled with Rollup and additionally exported a theme object which both sites imported for their ThemeProviders.

Now with Emotion 10 the theme property received by the library components is empty. I've tried different combinations of emotion babel plugins/presets in my Rollup config as well as gatsby-plugin-compile-es6-packages but without success.

I would really appreciate some advice on how to implement an emotion-based ui library that uses themes.

[Andarist]

@lloydh @dmfilipenko I suspect that you have 2 copies of @emotion/core package in your build, might be because of local linking or because of a monorepo without hoisted node_modules

[dmfilipenko]

@Andarist Thank you, you were right. I just setup in my component library @emotion/core as peerDependencies and everything start work as expected.

[chukkwagon]

I have a monorepo setup as well and I've specified @emotion/core as a peerDependency in my component library, but I am still seeing this error.

@lloydh are you still seeing the error?

[Andarist]

I have a monorepo setup as well and I've specified @emotion/core as a peerDependency in my component library, but I am still seeing this error.

Have you checked your whole monorepo structure if there is only a single copy of @emotion/core in all node_modules?

[lloydh]

@Andarist was basically on the money. While I had @emotion/core as a peerDependency I also had it as a devDepdendency to overcome the limitations of yarn/npm linking. I moved to a yarn workspace setup and removed the devDepdendency which solved my problem. @chukkwagon you should be OK with a monorepo.

[Andarist]

Seems like the issue has been diagnosed and the recommendation for a fix has been given - even though OP has not responded back if he has been able to get this working.