Initialization problem if duplicate in node_modules

[JalilArfaoui]

• emotion version: 9.1.2
• react-emotion version: 9.1.2
• react version: 16.2.0

I wanted to setup react-emotion in my project, but I had the following error even with the simplest code :

import styled, { css } from 'react-emotion'

const TestDiv = styled('div')`
  background: #333;
`
const TestComponent = () => (
  <TestDiv />
)

Error:

Uncaught TypeError: Cannot read property 'apply' of undefined
    at Styled._render [as render] (webpack-internal:///...ist/index.es.js:158)    

I tried to debug what was happening and I found out in https://github.com/emotion-js/emotion/blob/master/packages/create-emotion/src/index.js that create-emotion uses a global context to know if it has been already initialized.

I also realized that one of our dependencies was already using react-emotion, and despite that package.json versions were compatible, yarn did keep both modules in filesystem.

This is when I understood that the first module initialized correctly, but then the second one did not because it found an existing context.__SECRET_EMOTION_ ... resulting in the aforementioned error.

In conclusion, I identified the following work arounds:

• Create a PR on our dependency module (Done)
• Use my own create-emotion wrapper instead of the default emotion to create a custom instance with a custom context identifier, but that adds a somewhat useless boilerplate to our codebase ...

Would it be possible to avoid using a global context ? Or maybe a way that does not provoke this problem when duplicates are installed ?

[emmatown]

First of all, what you should do is encourage dependencies that use emotion to make it a peerDependency so that these issues are avoided. This is true even if these issues didn't happen since you would be bundling emotion twice.

Using a global context is something that was never really an ideal solution, we do it because of #349 but I'm beginning to think that we should remove the context option in emotion 10 (@tkh44 thoughts?) because the case it solves is extremely rare and for that case we could tell people to use npm pack(or hopefully this yarn proposal in the future) which wouldn't have that problem.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.