search

molefrog / wouter

🥢 A minimalist-friendly ~2.1KB routing for React and Preact
https://npm.im/wouter
The Unlicense
6.41k stars 146 forks source link

Fix compilation error on React < 18 #428

Closed alex-pex closed 3 months ago

alex-pex commented 3 months ago

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

I have used the same technique as Emotion https://github.com/emotion-js/emotion/commit/75a2f74418019819e0cdcb1e0720b0a5d0d65687#diff-e87fa5e3ae2595fc1671477ceb9c7327f968d5556791d29958210ed43474fc92R17

stackblitz[bot] commented 3 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

codecov[bot] commented 3 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

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

Additional details and impacted files ```diff @@ Coverage Diff @@ ## v3 #428 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 1 1 Lines 1 1 ========================================= Hits 1 1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

molefrog commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

molefrog commented 3 months ago

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 commented 3 months ago

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

molefrog commented 3 months ago

image 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 commented 3 months ago

Released in 3.1.2

alex-pex commented 3 months ago

thanks!