threepointone/glamor

Conflict when trying to use an NPM package that uses glamor

Closed this issue · 7 comments

ChenRoth-old commented

I'm trying to export components from my project to a separate project
I use webpack to build the newly exported project and link the main project to the built version of the exported project

However, when I try using an imported React component, I get the cache miss error:
Error: [glamor] an unexpected rule cache miss occurred. This is probably a sign of multiple glamor instances in your app

Now, I get that means I have glamor running two instances, but how do I resolve this?

otbe commented

Check via npm ls glamor which versions of glamor are installed and try to dedupe them via version management.

Edit: maybe I got you wrong. How to you solve this issue for react? It should be bundled twice too...

ChenRoth-old commented

There are no actual different versions (I verified that)
I believe it's that each project maintains its own Glamor instance and therefore there's a cache miss
This may not be related directly to Glamor, but I was wondering if anyone has ever done a similar thing

ChenRoth-old commented

OK, I found out the reason to all my pain today - I would pass glamor generated classes as props from one project to another's component, whereas each project has its own glamor instance (i.e. cache)
that resulted in a cache miss :)

TejasQ commented

How did you solve this, @ChenRoth ?

eligolding commented

@ChenRoth I am also experiencing that issue. Passing a glamor generated className to a glamorous component (a feature which glamorous officially supports) results in a cache miss. Did you end up solving the issue?

jem-swu commented

Well I don't know if this is going to be helpful, but I basically just ran into the same issue. We're abstracting some of our UI components to a separate module and importing them into our main codebases. But the codebases AND UI-lib all use glamor / glamorous.

Importing a glamor class from the UI library and trying to utilize it in a glamorous component in the main codebase was resulting in the cache miss error.

The way I've addressed this (and I'm not sure it's the right way, but it seems to be working) is that our UI library imports glamor/glamorous, and then passes them into the other apps. This way the lib becomes the source of truth for both.

import class from 'uiLibrary'
import Component from 'uiLibrary'
import glamorous from 'uiLibrary/glamorous'
nettiopsu commented

Same story, I think this issue should be still reopened, because it is not that suprising to use other objects that contain glamor. In my case there is a separate React UI components in their own package, which are using glamor, and main application that is using both those React components and glamor. Not quite sure why that could not be solved at least by allowing two different CSS glamor tables that are working at the same time..

  • 👍2