TypeError: Cannot read property 'filter' of undefined about nextein HOT 7 CLOSED

Update

The issue only happens when coming via <Link> and not when navigating to the page directly.

Repro steps on a preview of my site (tested Chrome and Safari on Mac): https://out-qsowcegedz.now.sh/

• Make sure the browser cache contains no data for https://out-qsowcegedz.now.sh/
• Open new incognito window and navigate to https://out-qsowcegedz.now.sh/
• Click on my blog link.
• Observe error in console

Doesn't happen when navigating to https://out-qsowcegedz.now.sh/blogging directly.
Doesn't happen on 2nd try with browser caching enabled (no incognito window).

My filter code:

const fromBlog = withPostsFilterBy(inCategory('blog', { includeSubCategories: true }))

And my Link code:

import Link from 'nextein/link'
// ....
<Link as="/blogging" href="/blog"><a>my blog</a></Link>

I also have this in my path map: '/blogging': { page: '/blog' }.

Here's a link to my repo in the hope it helps debugging the issue: https://github.com/stigi/ullrich.is/tree/nextein29

from nextein.

Hello @stigi

Hey thanks for such a detailed issue explanation. I'll check it out as soon as possible. I believe it might be related to the cache that is needed to make <Link> work on an exported version. Internally, on an exported version, the loadEntries uses the __NEXT_DATA__.props.posts that should be populated by the HOCs (withPosts, withPostsFilterBy, etc). In your case, there is no HOC call in the index file that contains that Link.

As a quick workaround I'd use a simple <a> tag instead of a <Link>
Let me try to see if it is possible to get a workaround for these scenarios. I saw you mentioned that going back and clicking on the link it works.

Thanks again!
Max

from nextein.

I gave it a bit more thought on this, and did some more research on both your code and nextein's. The main issue seems to be related to how Next.js handles Link and component lifecycle. If you use a Link the getInitialProps is called both in the server and client. For an exported site, that means that it will try to load data from the nextCache (__NEXT_DATA__) and in this particular scenario (as it might be in many others) the cache is not populated. This can also cause some more unexpected issues.

I'd recommend that for these particular scenarios, having a page that loads unrelated content (blog posts are disconnected from the index page) use a simple <a> tag. Link might work better when displaying a list of posts and jumping into a selected one. In that case, the cache is loaded with all posts displayed and the getInitialProps will hit the cache and work properly.

I'll try to figure out if is there any way to avoid getting getInitialProps to be called on an exported site. But, I believe that the simplest and short answer might be "if you don't want it, just use a regular a tag"

from nextein.

Hi @stigi,

After a few thoughts on this issue, I figured out that using the withPosts HOC on your index.js will also fix the problem. Even though posts are not being used, it will populate the __NEXT_DATA__ cache and that fixes the issues on the exported versions.

In case you want to use the Link component I believe that is an acceptable solution without too much compromise.

I'm closing this issue for now. Please feel free to re-open it if you want to discuss further.

Thanks for using Nextein!
Best,
Max

from nextein.

Thanks! Good idea. I figured that it feels cleaner to just use ‘’ when linking to blog content. Also I started using regular markdown for all other pages.

from nextein.

Sorry @elmasse, reopening for clarification:

Testing the exported app, using <Link /> everywhere.

1. If I open one of the posts from the home page it works pefectly, same when I go back using browser history or a link to /.

   To recap open localhost -> click first-post -> go back or click a link with href /

2. What doesn't work is if I land in one of the posts and then click to one of the / links. I get An unexpected error has occurred.. Is that normal?

   To recap open localhost/first-post/ -> click a link with href /

pages/index.js is using HOC withPosts and pages/post.js is using HOC withPost. Is it because the homepage / is not being cached?

from nextein.

Hi @zelphir,

Yes, this is an issue on how nextein/next works. Link requires the post to be in context. This means that if you have a Link in a single post, it won't work since the __NEXT_DATA__.props.posts is empty when you load the page standalone. As I said before in this issue, there are 2 workarounds:

• Use a simple a tag if you plan to get a link to a cross post.
• Wrap your pages/post.js with withPosts. This will put in context all available posts and therefore the Link should work properly.

There are pros and cons for both approaches. I would say that if you plan to have tons of posts, then use the first solution. If you have just a few (10-20 maybe?) then the second one is viable.

from nextein.