Preact: Suspense/Lazy and debug

[pmkroeker]

Found an issue with using Suspense/Lazy and debug.

I'm getting the following error in the console when debug is being used:

Uncaught Error: Missing Suspense. The throwing component was: Lazy

If I remove debug the app works correctly.

All of my Lazy routes are nested in a Suspense.

[andrewiggins]

FYI, I think I've gotten to the bottom of this. PR with fix should be out soon (couple days).

[ohmlnz]

Hi @andrewiggins, any updates on the above? I'm also experiencing the issue when using require('preact/debug'). Thanks!

[pmkroeker]

It would be great if this could get resolved. Having some issues with the latest release and was hoping debug might help.

[marvinhagemeister]

@pmkroeker I'd love to help out here! Do you happen to have a codesandbox or a scenario where the error occurs? Tried to reproduce it on my own but I'm unable to.

[pmkroeker]

@marvinhagemeister I'll put something together!
While I work on a sandbox I'll put the code.
This example uses wouter-preact, but the same issue happens with preact-router

if (process.env.NODE_ENV === 'development') require('preact/debug');
import { h, Component } from 'preact';
import { Suspense, lazy } from 'preact/compat';
import { Router, Route } from 'wouter-preact';

const Home = lazy(() => import('../Routes/Home'));

export class App extends Component {
    public render() {
        return (
            <Router base='/app'>
              <Route path='/'>
                <Suspense fallback={<Loading />}>
                  <Home />
                </Suspense>
              </Route>
            </Router>
        );
    }
}

Full error message:

Uncaught Error: Missing Suspense. The throwing component was: Lazy at Object../node_modules/preact/debug/dist/debug.module.js.preact__WEBPACK_IMPORTED_MODULE_0__.options.__e

[pmkroeker]

Here is a CodeSandBox that demonstrates the issue.

If you remove the wrapping Suspense it throws with the same error.

The biggest problem is that it crashes the app.

[MattAndDev]

Also just hit this exact same issue!
For me it looks like a preact/debug issue.
Will try to take a deeper look into it.

[andrewiggins]

Hi! Sorry this slipped through the cracks. I had to take a break from Preact for a lil bit due to some work stuff that came up. But I have some time to come back now :smile:

@marvinhagemeister I think this commit from my branch where I run tests against minified builds fixes this issue. (tl;dr: _childDidSuspend is missing from the mangle.json)

[marvinhagemeister]

@andrewiggins Ohh that could very much be it! I copied the code into our demo app and couldn't reproduce the error. That's presumably because we don't use the minified bundles in our demo app and build straight from source.