Add warning if multiple versions are running (addresses #1470)

packages/core/src/index.js

@@ -1,4 +1,8 @@
 // @flow
+import { registerEmotionModule } from '@emotion/utils'
+
+registerEmotionModule('emotion/@core')
+
 export { withEmotionCache, CacheProvider } from './context'
 export { jsx } from './jsx'
 export { Global } from './global'

packages/utils/__tests__/index.js

@@ -0,0 +1,34 @@
+// @flow
+import { registerEmotionModule } from '../src'
+describe('utils', () => {
+  let nodeEnv
+  let __console
+  beforeEach(() => {
+    nodeEnv = process.env.NODE_ENV
+    __console = global.console
+    global.console = {
+      warn: jest.fn()
+    }
+  })
+  afterEach(() => {
+    process.env.NODE_ENV = nodeEnv
+    global.console = __console
+  })
+  it('should warn if same module is registered twice when using dev build', () => {
+    const packageName = 'register-test-1'
+    process.env.NODE_ENV = 'development'
+    registerEmotionModule(packageName)
+    expect(console.warn).not.toHaveBeenCalled()
+    registerEmotionModule(packageName)
+    expect(console.warn).toBeCalledWith(
+      expect.stringContaining(`Package ${packageName} is already registered.`)
+    )
+  })
+  it('should not warn if using produciton build', () => {
+    const packageName = 'register-test-2'
+    process.env.NODE_ENV = 'production'
+    registerEmotionModule(packageName)
+    registerEmotionModule(packageName)
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+})

packages/utils/src/index.js

@@ -1,7 +1,32 @@
 // @flow
 import type { RegisteredCache, EmotionCache, SerializedStyles } from './types'
 
-let isBrowser = typeof document !== 'undefined'
+const isBrowser = typeof document !== 'undefined'
+
+const getGlobalInstances = (context: any) => {
+  const globalVersionsKey = '__EMOTION_VERSIONS__'
+  if (!context[globalVersionsKey]) {
+    context[globalVersionsKey] = {}
+  }
+  return context[globalVersionsKey]
+}
+
+type ModuleRegister = { [key: string]: boolean }
+
+const globalContext = isBrowser ? window : global
+
+const instances: ModuleRegister = getGlobalInstances(globalContext)
+
+export function registerEmotionModule(name: string) {
+  if (process.env.NODE_ENV !== 'production') {
+    if (instances[name]) {
+      console.warn(
+        `Package ${name} is already registered. Running multiple instances may cause problems. This can happen if multiple versions are runnning, or if multiple builds of the sae version are used.`
+      )
+    }
+    instances[name] = true
+  }
+}
 
 export function getRegisteredStyles(
   registered: RegisteredCache,