v11 - Cannot read property 'key' of undefined

Hey,

So, i have been playing around with the new v11 in an existing design system that used the v10 syntax which just seemed to work. However, in V11 emotion/react and styled is now implemented with nothing else changing. Previously, i never had to use the CacheProvider. However, i have upgraded from v10 to v11 (next) version and now when i try to get it to work in CRA (just importing my components from the package, say Button), for example, now results in this error…

TypeError: Cannot read property 'key' of undefined
createCache
node_modules/@emotion/cache/dist/cache.browser.esm.js:83
  80 | var movedStyles = false;
  81 | 
  82 | var createCache = function createCache(options) {
> 83 |   var key = options.key;
  84 |   var stylisOptions;
  85 | 
  86 |   if (!key) {
View compiled

I appreciate the is a newer version with little documentation, however i’m wandering what, a) i’m doing wrong b) is createCache now a default requirement or something… as i noticed that key is now required, and Nextjs _app.js now includes the< CacheProvider> component, where it was not required previously…

If this is not suited for here please close…

[MMT-LD]

FYI, rather then using “next” in package.json i added:

"@emotion/react": "^11.0.0-next.11",
"@emotion/styled": "^11.0.0-next.11"

this seemed to fix the above issue - in CRA

[Andarist]

Closing because it got stale and there are no followup actions we could take here.