Improving support for React 18 :)

Improving the support for new React 18

Hi , I am requesting this feature after viewing it on vercel’s (maintainers of Next js) styled jsx library, for more info please take a look at their discussion about it 👍

---

We can add useInsertionEffect for better hydration & concurrent support 💯 (for more info about useInsertionEffect click here )

• But this only support in React 18 so we need to implement fallback like below const useInsertionEffect = React.useInsertionEffect || React.useLayoutEffect
  (inspired by Next Js)

---

I am extremely sorry if I told or made any mistakes 😌

[chaudharykiran]

Is it working?

Below is my packages:

@emotion/cache@11.7.1 @emotion/react@11.9.0 @emotion/server@11.4.0 @emotion/styled@11.8.1

All the packages are in latest version but I am still getting this error. TypeError: Cannot read property ‘useContext’ of null

Anyhelp will be great.

[miracle2k]

Here is a repo that shows the current failure when trying to use emotion with next.js 18 / concurrent mode:

https://github.com/miracle2k/next-rsc-demo

TypeError: Cannot read properties of null (reading 'key')
    at insertStyles (webpack://_N_E/./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js?:19:25)
    at eval (webpack://_N_E/./node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js?:194:75)
    at eval (webpack://_N_E/./node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js?:56:12)
    at renderWithHooks (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5212:16)
    at renderForwardRef (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5381:18)
    at renderElement (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5526:11)
    at renderNodeDestructive (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5606:11)
    at renderNode (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5722:12)
    at renderHostElement (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5197:3)
    at renderElement (webpack://_N_E/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:5473:5)
error - unhandledRejection: TypeError: Cannot read properties of null (reading 'key')

In addition, there is a different error if you try to use it as part of a server component.