[Bug]: Vite + Preact + SSR: TypeError: Cannot read properties of undefined (reading 'context')

[rhengles]

Related issue: preactjs/preset-vite#73

What version of React Router are you using?

6.8.2 (latest)

Steps to Reproduce

I started with Vite and @preact/preset-vite.
I want my project to be fully compatible with React, but using @preact/compat.

Expected Behavior

The router works in the server and the browser, including the useLocation() and useNavigate() hooks.

Actual Behavior

When I start the app, I get this error:

TypeError: Cannot read properties of undefined (reading 'context')
    at Object.exports.useContext (/project/home/rhengles/workspace/node_modules/preact/hooks/dist/hooks.js:1:2680)
    at Object.Routes (/project/home/rhengles/workspace/node_modules/react-router/dist/umd/react-router.development.js:1177:46)
    at file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:6332
    at F (file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:6359)
    at F (file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:6434)
    at F (file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:6434)
    at F (file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:6434)
    at F (file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:7454)
    at Proxy.S (file:///project/home/rhengles/workspace/node_modules/preact-render-to-string/dist/index.mjs:1:4833)
    at render (entry-server.jsx:8:4)
    at file:///project/home/rhengles/workspace/server.js:76:23

Link to CodeSandbox

I've managed to get it almost working with react-router-dom@5.x if I don't try to use any of the router hooks.
If I get the useLocation() or useHistory() hooks from 5.x, I get exactly the same error as above as react-router-dom@6.x.

[timdorr]

This doesn't look like a bug in this library. We're using React APIs. If Preact doesn't emulate them properly, that's not really something we have to fix for. That should be handled upstream.

[rhengles]

@timdorr

Thank you for your quick response. I kept digging for the source of the problem, and I think I solved it by changing React Router itself. I'll open a PR soon

Edit: Here it is - #10175

[patdx]

If I understand correctly, I have experienced the same issue. This issue can reproduced with just Node.js and Preact, it does not require an external bundle like Vite to be observed. I added a minimum example here:

#8268 (comment)

Preact does implement all of the React APIs needed including the Context/useContext APIs. The issue is in module format and resolution. Preact is a dual format package (CommonJS + ESM).

While react-router and react-router-dom have some CommonJS and ESM-ish files they do not provide the ESM files in a format that lets vanilla Node.js consume react-router in pure ESM mode. Note that Node.js only looks at the main and exports fields in package.json, not other fields such as module.

While react-router does not use exports in package.json, even if you forget that and just try to import an ES Module directly in Node.js:

import "react-router-dom/server.mjs";

That server.mjs contains:

import { parsePath, Router, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Routes, UNSAFE_enhanceManualRouteObjects, createPath } from 'react-router-dom';

And Node.js resolves that import to react-router-dom/dist/main.js, a CommonJS file. To be more "hygenic", ideally server.mjs would only import other ES module files by name directly or by using exports field to let Node.js resolve react-router-dom import into an ESM file.

[rhengles]

@patdx Awesome work! This information is gold. Thank you for this detailed explanation.