Error loading content page on 2.2.0 version

[AndrelhVieira]

Hello, sorry for the inconvenience, but I am completing the development of my project based on your template. The first time I downloaded the template was on May 28th, so it is something recent. I noticed that when running the project and accessing localhost, the Header and Footer components load, but the page content itself does not load. An interaction (click, pressing a button, etc.) is required for the content to load completely. This occurs both in development and production environments.

I noticed that in the current version this issue does not occur, but on the version I got on May 28th it also happens sometimes. I would like to understand what change was made to fix this error.

Remarks: I searched the commits and tested adding different modifications you included in the project after May 28th, but so far I haven't been successful. Could you please help me?

I attached some evidence to make the problem more understandable.
OBS: To show the context I clicked once on the screen.
Running by yarn dev

Screen.Recording.2024-06-28.at.21.08.45.mov

Reloading page on browser

Screen.Recording.2024-06-28.at.21.09.26.mov

[PxlSyl]

Hello!

First, and as we usually say here: bravo!

I really like what you were able to create with this template, very very clean, especially with 3 languages ​​:)

I'm sorry to hear that you're having problems, and as you seem to have made a lot of modifications -including on the home page- I don't know if I'll be able to tell you where the problem is exactly, without the full code in front of me

Edit : This may be due to the way your cookies are managed, on the first loading (I use Brave) I have the same error on your site, but when I deactivate the shield, everything is normal. I also noticed some issues in the console, best thing to do is try to debug them one by one

[AndrelhVieira]

Thank you for answer!

I will try to take the time to understand the possible error. As soon as I have an answer to the error, I will send it here for registration.

Thanks again for your response and feedback on the project!

[AndrelhVieira]

@PxlSyl Can you help me?

I have been investigating since the day I created this issue, but unfortunately, I have not been able to find a solution to the problem I'm facing. I downloaded the latest version of the template and made comparisons, but unfortunately, I couldn't make any progress. The only progress I have made so far is identifying that the error occurs only on routes where I display posts, in my case on "/blog" (any route that contains /blog also occurs, for example, "/blog/myPost") and on the homepage "/".

Since I was not able to identify the cause of the problem on my own, could you help me with this issue? I will make my repository public if you agree to help me with this.

Note: I believe I did not mention this before, but I am still learning Next.js and this is my first project using this framework, so my lack of knowledge might be an impediment.

Link to my repo: https://github.com/AndrelhVieira/Portfolio_blog

[PxlSyl]

@PxlSyl Can you help me?

I have been investigating since the day I created this issue, but unfortunately, I have not been able to find a solution to the problem I'm facing. I downloaded the latest version of the template and made comparisons, but unfortunately, I couldn't make any progress. The only progress I have made so far is identifying that the error occurs only on routes where I display posts, in my case on "/blog" (any route that contains /blog also occurs, for example, "/blog/myPost") and on the homepage "/".

Since I was not able to identify the cause of the problem on my own, could you help me with this issue? I will make my repository public if you agree to help me with this.

Note: I believe I did not mention this before, but I am still learning Next.js and this is my first project using this framework, so my lack of knowledge might be an impediment.

Link to my repo: https://github.com/AndrelhVieira/Portfolio_blog

Hi, I can try. First, you should fix your renderText function and replace p with a regular div there, it will fix the "p cannot be an ascendant of p" error, and such error can block your UI :

BackgroundContent.tsx :

import React from 'react'
import { createTranslation } from 'app/[locale]/i18n/server'
import { LocaleTypes } from 'app/[locale]/i18n/settings'

type BackgroundContentPropsType = {
  params: { locale: LocaleTypes }
}

type BlurOpacityProps = Array<{
  blur: number
  opacity: number
}>

const blurOpacities: BlurOpacityProps = [
  { blur: 3, opacity: 10 },
  { blur: 3, opacity: 20 },
  { blur: 3, opacity: 30 },
  { blur: 3, opacity: 40 },
  { blur: 3, opacity: 50 },
  { blur: 2, opacity: 60 },
  { blur: 1.5, opacity: 70 },
  { blur: 1, opacity: 80 },
  { blur: 0, opacity: 90 },
]

const BackgroundContent = async ({ params: { locale } }: BackgroundContentPropsType) => {
  const { t } = await createTranslation(locale, 'home')

  const renderText = (blur: number, opacity: number) => (
    <div // Replace <p> with a <div>
      className={`text-center filter blur-[${blur}px] 
      ${opacity ? `opacity-[${opacity}%] ` : ''}
      md:text-xl`}
    >
      {t('backgroundContent.I')}{' '}
      <p className="inline text-primary-500">{t('backgroundContent.solve_problems')}</p>{' '}
      {t('backgroundContent.and_build_solutions_to_help_others_and_make')}{' '}
      <p className="inline text-[#3891A6]">{t('backgroundContent.dreams')}</p>{' '}
      {t('backgroundContent.come_true_with')}{' '}
      <p className="inline text-emerald-500">{t('backgroundContent.technology')}</p>
    </div> // Replace </p> with a </div>
  )

  return (
    <div className="flex justify-center lg:mt-64">
      <section className="flex flex-col">
        {blurOpacities.map(({ blur, opacity }, index) => (
          <div key={index}>{renderText(blur, opacity)}</div>
        ))}
      </section>
    </div>
  )
}

export default BackgroundContent

I'll try to look for other issues, let me know if it changes something (or not)!

Kind regards,

Edit: others issues to fix (will list them there until all fixed) :

• Modal.tsx component : error "Props must be serializable for components in the "use client" entry file, "onCancel" is invalid.ts(71007)
  (parameter) onCancel: () => void
  No quick fixes available"

[AndrelhVieira]

Cool! I'll update the code and give you feedback's. Thank you so much!

[AndrelhVieira]

Hey @PxlSyl,

I made the following modifications as you suggested/requested:

In the "BackgroundContent" component, I changed the

tag to a

.
I realized that the modal wasn't necessary, so I removed it from the code. As a result, the error you pointed out above will no longer occur.

However, the original error of not loading content on the home page ('/') and the blog page ('/blog') still persists.

I want to thank you once again for your willingness to help me. Thank you!

I keep doing tests to understand what error is that.

[PxlSyl]

Hey! Perhaps it's not related to this, but I noticed you're using Google as analytics. Have you tried to remove it all in order to see if the error is related to your cookie management?

I think you should try, that way we'll know if the error is related to this, or not.

If not, I'll try to investigate more if I find the time!

[AndrelhVieira]

Locally, I removed all analytics implementations, but I still didn't succeed. With or without Google Analytics, the error persists.

[PxlSyl]

I just tried to navigate to your website, and the error was not present. Does this happen from time to time or is it regular for you? Have you tried visiting the site with other browsers?

[AndrelhVieira]

Sorry for the delay. Yes, I tested it on the following browsers:

• Vivaldi
• MS Edge
• Safari

Unfortunately, in all cases, this error seems to occur. Unfortunately, it's something I couldn't identify even with the suggested tests after more than a week of investigating. I think I'll have to accept this "bug" in my app. Thank you for your attention and willingness to help me. Thanks!

[PxlSyl]

Sorry for the delay. Yes, I tested it on the following browsers:

• Vivaldi
• MS Edge
• Safari

Unfortunately, in all cases, this error seems to occur. Unfortunately, it's something I couldn't identify even with the suggested tests after more than a week of investigating. I think I'll have to accept this "bug" in my app. Thank you for your attention and willingness to help me. Thanks!

I still can try to help you, no worries :) I think you should try to solve all errors there, (too may performances issues) one by one :

https://pagespeed.web.dev/analysis/https-andreluizv-dev-br/nqgvjs108p?hl=fr&form_factor=desktop

https://pagespeed.web.dev/analysis/https-andreluizv-dev-br/nqgvjs108p?hl=fr&form_factor=mobile

Some of this errors won't be easy to solve, but it's still possible.

For the other error you still encounter, the more you'll be able to solve, the more chance to solve this one as well will be on your side, gl!

[AndrelhVieira]

Okay, I'll be trying to solve these general and performance issues. Thanks a bunch!