Root level suspension doesn't work as expected
See original GitHub issuePreact version: 10.10.2
.
Bug Description
When wrapping the entire <App>
with Suspense, we can see some odd behavior.
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<Suspense>
<App />
</Suspense>
</BrowserRouter>
)
It seems that only lazy chunks are suspended, instead of the entire app.
To Reproduce
Open the React version of the app: https://client-side-rendering.pages.dev Open the Preact version of the app: https://8009dc66.client-side-rendering.pages.dev
In the network tab, block the index.[hash].js
request URL for each page and reload (this blocked file is the Home page chunk).
The React app will look like this:
While the Preact app will look like this:
As we can see, the navigation bar does not suspend, since its not lazily loaded.
Source can be found here: https://github.com/theninthsky/client-side-rendering
There’s a main (React) branch and a preact branch. Both are completely identical, except for the Preact configurations in webpack.config.js
and tsconfig.json
.
Expected behavior The entire app should suspend until its lazy chucks are loaded.
Sorry to bother you again, but this is the final step towards completely replacing React with Preact.
Issue Analytics
- State:
- Created a year ago
- Comments:14 (8 by maintainers)
Feel free to open an issue, I have narrowed it down to zustand and the
useSyncExternalStore
of Preact not fully working with the selector usage of zustand https://codesandbox.io/s/great-microservice-i9p35o?file=/src/index.js @theninthskySaying this in the politest way possible, we are still talking about different things. I am saying that the suspension does work correctly try with
Which will exhibit the aforementioned behavior correctly, as shown in the video. The difference is that if you block a request the JS-Runtime for
import
will throw anError
. Errors aren’t handled by Suspense in our case as the behavior here slightly deviates from the default one.