error 'useInsertionEffect'

[jgarmar]

Hi, I've created a project with the same react and emotion versions, and I get this error:

`ERROR in ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 95:25-45

export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

ERROR in ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 95:48-68

export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)`

I only appears when I use react-select.

[Methuselah96]

This was a bug in Emotion. Try upgrading to @emotion/react@11.8.1.

[jgarmar]

Now I've installed from scratch and works, thanks

[thisKeeWord]

@jgarmar How did you install it from scratch? I've tried that several times and still nothing.

[tomfridental1]

Having the same issue, we don't have emotion installed in our project at all.

[Methuselah96]

What version of Emotion is in your lock file? Can you delete and regenerate your lock file to manually upgrade it?

[tomfridental1]

Under react-select its
"react-select": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.0.tgz", "integrity": "sha512-GM6Fbv1+X+kb3e5Fc4oNeyOJkCIesY/D4NBiReKlGY4RxoeztFYm3J0KREgwMaIKQqwTiuLqTlpUBY3SYw5goQ==", "dev": true, "requires": { "@babel/runtime": "^7.12.0", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.1.1", "@types/react-transition-group": "^4.4.0", "memoize-one": "^5.0.0", "prop-types": "^15.6.0", "react-transition-group": "^4.3.0" },

  Few notes:
  - We are using react-select with wrapper in our component library project, and import it in other projects. (All this projects has no emotion installed as well).
  - Upgrading consuming package to react 18 fixes this issue (we cannot update all our packages to this version)
  - Using cjs instead of esm also fixes this issue. (this kills the tree-shaking effect, also a bad solution for us)

[Methuselah96]

@tomfridental1 What does the @emotion/react entry show in your lock file?

[tomfridental1]

@Methuselah96

"@emotion/react": {
      "version": "11.9.0",
      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
      "dev": true,
      "requires": {
        "@babel/runtime": "^7.13.10",
        "@emotion/babel-plugin": "^11.7.1",
        "@emotion/cache": "^11.7.1",
        "@emotion/serialize": "^1.0.3",
        "@emotion/utils": "^1.1.0",
        "@emotion/weak-memoize": "^0.2.5",
        "hoist-non-react-statics": "^3.3.1"
      }

Thanks :)

[tomfridental1]

@Methuselah96 I would like to update that we fixed the issue, the problem was terser rollup compressor compressed the
r["useInsertion"+"Effect"] to r["useInsertionEffect"] which caused the prolbem.

Adding: terser({ compress: { evaluate: false, })   to terser config fixed this issue.