Fix export 'useInsertionEffect' (imported as 'React') was not found in 'react' on React < 13

[rusikf]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @emotion/[email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js b/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
index 1b0e17d..b632900 100644
--- a/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
+++ b/node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 var syncFallback = function syncFallback(create) {
   return create();

This issue body was partially generated by patch-package.

[Andarist]

I'd love to see a repro case for the problem that you have experienced. It's important to know what exact tools were involved.

[rusikf]

Thanks for your response! @Andarist

I have this error during webpack compilation.

ERROR in ./node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js 5:25-52
export 'useInsertionEffect' (imported as 'React') 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)
 @ ./node_modules/react-select/node_modules/@emotion/react/dist/emotion-react.browser.esm.js 5:0-142 192:2-38 215:2-38 305:2-42
 @ ./node_modules/react-select/dist/react-select.esm.js 8:0-47 41:45-58

Source code - /node_modules/@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js

import * as React from 'react';

var syncFallback = function syncFallback(create) {
  return create();
};

var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
var useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;
var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;

export { useInsertionEffectAlwaysWithSyncFallback, useInsertionEffectWithLayoutFallback };

Recap: Code has fallback in declaration of var useInsertionEffect => webpack must not raise an error on import * step, Do you have any ideas? Thanks! :wink:

[Andarist]

I need a full runnable/clonable repro case to debug this.