emotion-js/emotion · warning

You are loading @emotion/react when it is already loaded. Ru

Error message

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

What it means

When @emotion/react loads, it sets a flag __EMOTION_REACT_<major>__ on the global object. If that flag already exists, a second copy of the library (same major version) is being loaded, and emotion warns that multiple instances can break context sharing, caches, and hashing. This is a console.warn, not a throw, but it signals real duplication.

Source

Thrown at packages/react/src/index.ts:54

declare const jest: unknown
declare const vi: unknown

if (isDevelopment) {
  const isBrowser = typeof document !== 'undefined'
  // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked
  const isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined'

  if (isBrowser && !isTestEnv) {
    // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
    const globalContext: Record<string, unknown> =
      typeof globalThis !== 'undefined'
        ? globalThis // eslint-disable-line no-undef
        : isBrowser
          ? window
          : global
    const globalKey = `__EMOTION_REACT_${pkg.version.split('.')[0]}__`
    if (globalContext[globalKey]) {
      console.warn(
        'You are loading @emotion/react when it is already loaded. Running ' +
          'multiple instances may cause problems. This can happen if multiple ' +
          'versions are used, or if multiple builds of the same version are ' +
          'used.'
      )
    }
    globalContext[globalKey] = true
  }
}

View on GitHub (pinned to b882bcba85)

Solutions

1. Run npm ls @emotion/react (or yarn why) to find duplicate copies in node_modules
2. Add dedupe / overrides in the package manager (npm dedupe, yarn resolutions, pnpm overrides) to force a single version
3. Ensure dependencies list @emotion/react as a peerDependency instead of bundling it
4. Check the bundler config for accidental dual ESM/CJS entry inclusion and alias @emotion/react to one copy

Example fix

// before (package.json)
"dependencies": { "@emotion/react": "^11.11.0" }
// after (package.json, forcing one copy)
"overrides": { "@emotion/react": "^11.11.0" }

const key = `__EMOTION_REACT_${pkg.version.split('.')[0]}__`
if (globalThis[key]) console.warn('Duplicate @emotion/react detected before render')

When it happens

Trigger: Bundling two copies of @emotion/react (e.g. one from your app, one from a dependency's node_modules due to mismatched semver ranges); loading both an ESM and CJS build; mixing a bundled copy with a CDN/UMD copy on the same page.

Common situations: Dependency A requires ^11.x and B requires ^11.y resolving to two installed versions; monorepo where a package bundles its own emotion instead of listing it as a peer dependency; SSR + client hydration loading different builds.

Related errors

• css can only be used during render
• cx can only be used during render
• Strings are not allowed as css prop values, please wrap it i
• [ThemeProvider] Please return an object from your theme func
• [ThemeProvider] Please make your theme prop a plain object

AI-assisted analysis of emotion-js/emotion@b882bcba85 (2026-09-02). Data as JSON: /api/errors/e1b0f7c9e4013f8d. Report an issue: GitHub.