Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme is empty when importing component outside the Gatsby root #1479

Closed
moroshko opened this issue Aug 22, 2019 · 8 comments
Closed

Theme is empty when importing component outside the Gatsby root #1479

moroshko opened this issue Aug 22, 2019 · 8 comments
Labels

Comments

@moroshko
Copy link
Contributor

@moroshko moroshko commented Aug 22, 2019

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:

src
  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

This comment has been minimized.

Copy link

@dmfilipenko dmfilipenko commented Aug 28, 2019

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

packages
	|_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

This comment has been minimized.

Copy link

@lloydh lloydh commented Aug 29, 2019

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

This comment has been minimized.

Copy link
Member

@Andarist Andarist commented Aug 29, 2019

@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

This comment has been minimized.

Copy link

@dmfilipenko dmfilipenko commented Aug 30, 2019

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

@chukkwagon

This comment has been minimized.

Copy link

@chukkwagon chukkwagon commented Sep 3, 2019

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

This comment has been minimized.

Copy link
Member

@Andarist Andarist commented Sep 3, 2019

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

This comment has been minimized.

Copy link

@lloydh lloydh commented Sep 3, 2019

@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

This comment has been minimized.

Copy link
Member

@Andarist Andarist commented Oct 25, 2019

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.

@Andarist Andarist closed this Oct 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.