preact-router not working with preactX

[untitledlt]

I'm using latest [email protected] and [email protected]. I'm getting no errors if i comment out <Router>...</Router> part so I guess it's preact-router related.

Consumer is expecting a function as one and only child but didn't find any
r.render @ debug.module.js:formatted:1

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at ../node_modules/.registry.npmjs.org/preact/10.0.0-beta.3/node_modules/preact/debug/dist/debug.module.js.__WEBPACK_IMPORTED_MODULE_0_preact__.options.diffed (debug.module.js:formatted:1)
    at ../node_modules/.registry.npmjs.org/preact/10.0.0-beta.3/node_modules/preact/debug/dist/debug.module.js.__WEBPACK_IMPORTED_MODULE_0_preact__.options.diffed (debug.module.js:formatted:1)
    at P (debug.module.js:formatted:1)
    at b (debug.module.js:formatted:1)
    at P (debug.module.js:formatted:1)
    at b (debug.module.js:formatted:1)

[marvinhagemeister]

Can you show is the <Router> part? The error message suggests that thecreateContext API is used and one of the consumers has an invalid child. Check if all consumers are similar to this example:

<Consumer>
  {value => <MyComponent foo={value} />}
</Consumer>

[untitledlt]

It's the same as per preatc-router examples. I do not use context, but i use redux which uses context internally. Redux provider wraps higher <App> component.

<Router>
    <Home path="/" />
    <Profile path="/profile" />
</Router>

[marvinhagemeister]

I'm asking because the chance that this is an issue with preact-router is very unlikely because it doesn't even use context at all. Can you share a codesandbox or a repo where the issue can be reproduced? We'd love to take a look at it 👍

[Ucorp]

I have similar error then use router with hooks. Demo

[marvinhagemeister]

@Ucorp That's a different issue :slightly_smiling_face: The way preact-router currently works is that it expects direct children of the Router component to have a path="/foo" prop. It will fail if that's not present.

Change this:

<Router>
  <ThemeContext.Provider value={{ theme, setTheme }}>
    <Home path="/" />
    <About path="/about" />

    <button onClick={() => setTheme("dark")}>set dark</button>
    <button onClick={() => setTheme("light")}>set light</button>
  </ThemeContext.Provider>
</Router>

...to this:

<ThemeContext.Provider value={{ theme, setTheme }}>
  <Router>      
    <Home path="/" />
    <About path="/about" />
  </Router>
  <button onClick={() => setTheme("dark")}>set dark</button>
  <button onClick={() => setTheme("light")}>set light</button>
</ThemeContext.Provider>

[ForsakenHarmony]

Oh sorry, thought that was the original issue

[cristianszwarc]

With PreactX I'm getting:

preact.module.js:14 Uncaught TypeError: Cannot read property 'default' of undefined

on my setup attributes is not available, instead I see props containing the path

[marvinhagemeister]

@cristianszwarc make sure you're using preact-router@next. It will be promoted to latest once Preact X is released

[cristianszwarc]

cheers! preact-router@next did the trick, works perfectly.

[glenndehaan]

Hey I see that Preact X went live. Can this be merged?

[marvinhagemeister]

Yep, we'll release a new stable version of preact-router soon

[jaikathuria]

I am still getting issue with preact-router only with the prod build. It says

TypeError: Object(...) is not a function
method: render at: <project_dir>/node_modules/preact-router/dist/preact-router.es.js

I am using

    "preact": "^10.0.0",
    "preact-router": "^3.0.1",

[vimtor]

Any news on this? I am getting when clicking a link:

Uncaught (in promise) TypeError: Cannot read property 'type' of undefined

[developit]

@vimtor this issue only happens when using a version of preact-router that is out of date - just updating to version 3 fixes it.