Fix compilation error on React < 18

[alex-pex]

The error was Attempted import error: 'useInsertionEffect' is not exported from 'react' (imported as 'React').

I have used the same technique as Emotion emotion-js/emotion@75a2f74#diff-e87fa5e3ae2595fc1671477ceb9c7327f968d5556791d29958210ed43474fc92R17

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (8cee71d) to head (3223588).
Report is 1 commits behind head on v3.

Additional details and impacted files

@@            Coverage Diff            @@
##                v3      #428   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines            1         1           
=========================================
  Hits             1         1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[molefrog]

Wow. What an interesting case. Didn't know minifiers can do that.
There is another PR from emotion, where the author says that the trick proposed is not bulletproof and some build tools can expand it.

[alex-pex]

I don't know if you really need the bulletproof fix: do people embed wouter inside another package and still expect it to work with react < 18? It's a strange combo

[molefrog]

I see, could you also add a comment above that line to explain the hack?

[molefrog]

Also, one thing I can't wrap my head around is the import of useSyncExternalStore (also, React 18 only) in the shim library we use. They are essentially doing the same thing: importing the native method with a fallback to the user-land implementation. Wouter depends on this library, so I would expect webpack to complain about the import there too. Can you try to import this library directly for the sake of experiment?

[alex-pex]

with "use-sync-external-store": "^1.2.0",

[molefrog]

with "use-sync-external-store": "^1.2.0",

Magic... I have no idea why it works with useSES, but okay let's just merge the fix.

[molefrog]

Released in 3.1.2

[alex-pex]

thanks!