React Router causing issues

moonmeister commented 3 years ago

Error

Error: 
   0: command ["node", "--unhandled-rejections", "strict", "--loader", "toast/src/loader.mjs", "/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/.bin/toast-render", "/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/.tmp", "/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/public", "src/pages/index.js", "src/pages/app.js", "src/pages/login.js"] exited with code 1

Stack trace

/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13
    throw new Error(prefix + ": " + (message || ''));
          ^
Error: Invariant failed: Browser history needs a DOM
    at invariant (/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
    at Object.createBrowserHistory (/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/history/cjs/history.js:273:16)
    at new BrowserRouter (/mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/react-router-dom/cjs/react-router-dom.js:68:29)
    at h (file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/preact-render-to-string/dist/index.mjs:1:1765)
    at h (file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/preact-render-to-string/dist/index.mjs:1:3987)
    at h (file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/preact-render-to-string/dist/index.mjs:1:2317)
    at h (file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/preact-render-to-string/dist/index.mjs:1:3987)
    at h (file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/preact-render-to-string/dist/index.mjs:1:2317)
    at render (file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/toast/src/page-renderer-pre.mjs:82:18)
    at file:///mnt/c/Users/Alex/code/moonmeister/where-is-waldo/node_modules/toast/toast-render.mjs:55:14

Metadata

key	value
version	0.1.0
os_type	Linux
os_release	4.4.0-19041-Microsoft

moonmeister commented 3 years ago

seems I need a different router for SSR

ChristopherBiscardi commented 3 years ago

why would you be SSR'ing authenticated content? (if this was about what you asked about in voice chat)

moonmeister commented 3 years ago

Right, How would I not SSR it? I added the router to a page in pages and it threw this error. My assumption was it'd SSR the root page but not the client side route I just defined.

ChristopherBiscardi commented 3 years ago

the short version is useEffect (which doesn't run on the server) or <Suspense/> + lazy. These are the same ways you'd do it in React.

here is an example from the @toastdotdev/mdx package.

I've added this to the list of docs that needs to be created in #10

ChristopherBiscardi commented 3 years ago

closing this since it has a solution and an issue for docs (https://github.com/toastdotdev/toast/issues/10)

For anyone landing here looking for "SRR wrapper modifications" https://github.com/toastdotdev/toast/issues/49 is probably the issue to follow

toastdotdev / toast