'Problem finding string atached to json file when translating (i18n)

I have successfully translated many of the pages on my website project but now I have moved to translate specific components that were created and it is not working.

The error message I get is as follows: "TypeError: Cannot read properties of undefined (reading 'titulo')"

**Note: I am using NextJS and TailwindCSS

This is the code for the JSON file strings where it should grab the translation, I have two files, one for ES (Spanish) and another EN (English)


"heroBanner":{
        "titulo": "Ayudamos a PYMES a Captar la Atención mediante Publicidad Digital",
        "subtitulo": "BIENVENIDO A COTTONMEDIA"
    },

This is the component code where I have passed the props:

import React from 'react'
import Custom__Cursor from './Custom__Cursor'

function Hero__Banner(props) {
  
  return (
    <div>

      <div className="relative h-screen">

        <div className="h-full w-full">
          <video autoPlay muted loop className="object-cover h-screen w-full ">
            <source src="/AdsBgVideo.mp4" type="video/mp4">
            </source>
          </video>
        </div>

        <div className="absolute top-0 h-full w-full bg-black opacity-60 z-10"></div>

        <div className="absolute top-1/4 z-20 max-w-screen-md md:max-w-screen-xl">
          <div className='flex flex-col px-10 space-y-5'>
            <p className='text-left text-sm md:text-base font-medium tracking-wide filter drop-shadow-md'>{props.titulo}</p>
            <p className='text-left text-4xl md:text-5xl leading-normal md:leading-relaxed filter drop-shadow-md'>{props.subtitulo}</p>
          </div>

        </div>

      </div>

    </div>
  )
}

export default Hero__Banner

Then where the component is rendered I have included these props with the string in order to get the translation as follows:

import Head from 'next/head'
import Image from 'next/image'
import Hero__Banner from '../components/Hero__Banner'
import ScrollToTop from '../components/ScrollToTop'

export default function Home(props) {

  const { index, heroBanner } = props;


  return (
    <div>
      <Head>
        <title></title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/short-logo.svg" />
      </Head>

      
      {/*Main content */}

      {/* Hero section */}

      <Hero__Banner 
        titulo={heroBanner.titulo}
        subtitulo={heroBanner.subtitulo}
      />

    </div>
  )
}

export async function getStaticProps({locale}) {
  const response = await import(`../lang/${locale}.json`);

  return {
    props: {
      index: response.default.index,
      heroBanner: response.default.heroBanner
    },
  };
}

Even after doing that, I still get the same error, not sure why this is happening. The component translations are now on the index page which is in "pages", so it should work in my opinion. As you can see in the code, I already have some translated sections in the index, which work perfectly.

Error image

Any suggestions?

Solution 1:^[1]

When you are translating with i18n, and get this error, it could be because you have altered the translation JSON file and the server needs to be restarted. That was the case for me, hope this helps.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Problem finding string atached to json file when translating (i18n)

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]