{"record":{"id":"0d335660a176eacf","repo":"emotion-js/emotion","slug":"you-have-to-configure-key-for-your-cache-please","errorCode":null,"errorMessage":"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\nIf multiple caches share the same key they might \"fight\" for each other's style elements.","messagePattern":"You have to configure `key` for your cache\\. Please make sure it's unique \\(and not equal to 'css'\\) as it's used for linking styles to your cache\\.\nIf multiple caches share the same key they might \"fight\" for each other's style elements\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/cache/src/index.ts","lineNumber":57,"sourceCode":"\nconst defaultStylisPlugins = [prefixer]\n\nlet getSourceMap: ((styles: string) => string | undefined) | undefined\nif (isDevelopment) {\n  let sourceMapPattern =\n    /\\/\\*#\\ssourceMappingURL=data:application\\/json;\\S+\\s+\\*\\//g\n  getSourceMap = styles => {\n    let matches = styles.match(sourceMapPattern)\n    if (!matches) return\n    return matches[matches.length - 1]\n  }\n}\n\nlet createCache = (options: Options): EmotionCache => {\n  let key = options.key\n\n  if (isDevelopment && !key) {\n    throw new Error(\n      \"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\\n\" +\n        `If multiple caches share the same key they might \"fight\" for each other's style elements.`\n    )\n  }\n\n  if (isBrowser && key === 'css') {\n    const ssrStyles = document.querySelectorAll(\n      `style[data-emotion]:not([data-s])`\n    )\n\n    // get SSRed styles out of the way of React's hydration\n    // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)\n    // note this very very intentionally targets all style elements regardless of the key to ensure\n    // that creating a cache works inside of render of a React component\n    Array.prototype.forEach.call(ssrStyles, (node: HTMLStyleElement) => {\n      // we want to only move elements which have a space in the data-emotion attribute value\n      // because that indicates that it is an Emotion 11 server-side rendered style elements\n      // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector","sourceCodeStart":39,"sourceCodeEnd":75,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/cache/src/index.ts#L39-L75","documentation":"createCache requires a unique `key` that identifies the cache in the DOM (used as the data attribute/class prefix for linking styles). In development, emotion throws if no key is provided so caches can be traced and won't collide.","triggerScenarios":"Calling createCache({}) or createCache({ stylisPlugins: [...] }) without options.key while NODE_ENV is development.","commonSituations":"Setting up emotion's createCache manually in an app or SSR setup and forgetting the key, or spreading options where key got lost.","solutions":["Add a unique key: createCache({ key: 'my-app' })","Ensure the key is not 'css' (reserved default; triggers a separate warning)","If key genuinely can't be provided, guard cache creation behind the same isDevelopment check you control"],"exampleFix":"// before\nconst cache = createCache({ stylisPlugins: [prefixer] })\n// after\nconst cache = createCache({ key: 'my-app', stylisPlugins: [prefixer] })","handlingStrategy":"validation","validationCode":"const key = options.key ?? 'my-app';\nif (!key) throw new Error('createCache requires a unique key');\nif (key === 'css') throw new Error('key must not be the reserved value \"css\"');","typeGuard":"const hasCacheKey = (o) => typeof o === 'object' && o !== null && typeof o.key === 'string' && o.key.length > 0 && o.key !== 'css';","tryCatchPattern":null,"preventionTips":["Always pass a unique app-specific key to createCache","Never use 'css' as the key","Centralize cache creation in one module so options can't be omitted","Add a unit test asserting the cache key is set in dev builds"],"tags":["emotion","cache","configuration","ssr"],"backgroundTag":"missing-required-option","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}