0

Estou querendo adicionar uma internacionalização com i18next no meu projeto react porem esta um erro, ressalto que sou iniciante e nao tenho tanta noção em react ainda, segue abaixo as prints, ressalto tambem que instalei todas dependencias normalmente

print da estrutura do projeto print do erro

Acredito que exista varios erros ainda no projeto, se poderem me enviar o codigo solucionado ficarei bem feliz, ja tentei resolver com nosso colega chatgpt mas nada.

App.js:

// src/App.js
import React, { useEffect, useState } from 'react';
import { setupNavbarScroll } from './anim/anim.js';
import './styles/App.css';
import { useTranslation } from 'react-i18next';
import i18n, { DEFAULT_LNG } from './i18n'; // Importando DEFAULT_LNG e i18n do arquivo i18n.js

function Navbar() {
  return (
    <nav className="navbar">
      <div className="logo">
        <span>IFmaker</span>
      </div>
      <div className="links">
        <a className="navlink" href="#">Inicio</a>
        <a className="navlink" href="#">Agendamento</a>
        <a className="navlink" href="#">Equipe</a>
        <a className="navlink" id="navref1" href="#">Estações</a>
        <a id="navref2" href="#">Atendimento</a>
      </div>
    </nav>
  );
}

function MainSection() {
  return (
    <main className="principaltopo">
      <div className="headline">
        <h1 id="refifmaker1"><span id="refifmaker" style={{ color: '#8764B8' }}>IFmaker</span> - Seu Espaço de Criação</h1>
        <p>Bem-vindo ao <strong>IF Maker - Campus Palmares</strong>, onde a imaginação ganha vida por meio da tecnologia e da colaboração.</p>
      </div>
      <div className="headlinebtns">
        <a href="" className="headlinebtn">Conheça Nossos Equipamentos</a>
        <a href="" className="headlinebtn">Participe de Uma Oficina</a>
      </div>
    </main>
  );
}

function ProjectCard({ title, description }) {
  return (
    <article className="card">
      <div className="card-img item1">
        <div className="card-imgs pv delete"></div>
      </div>

      <div className="project-info">
        <div className="flex">
          <div className="project-title">{title}</div>
        </div>
        <span className="lighter">{description}</span>
      </div>
    </article>
  );
}

export default function App() {
  useEffect(() => {
    // setupNavbarScroll(); // Esta função não está definida aqui, então comentei-a
  }, []);

  const [lng, setLng] = useState(DEFAULT_LNG); // Adicionei a declaração de estado para lng

  const { t } = useTranslation(); // Corrigi a importação de useTranslation

  const updateLang = language =>
    i18n.changeLanguage(language)
      .then(() => setLng(language))
      .catch(e => console.log(e));

  return (
    <div className="App">
      <h1>{t(`language.${lng}`)}</h1>
      <h1>{t("hello-world")}</h1>
      <button onClick={() => updateLang("en-US")}>en-US</button>
      <button onClick={() => updateLang("pt-BR")}>pt-BR</button>
      <p>{t("interpolation", { value: lng })}</p>
    </div>
  );
}

i18n.js:

// src/i18n.js
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { resources } from './locales';

export const DEFAULT_LNG = 'en-US'; // Defina o idioma padrão aqui

i18n
  .use(LanguageDetector)
  .init({
    compatibilityJSON: 'v4',
    fallbackLng: DEFAULT_LNG,
    resources,
    detection: {
      order: ['navigator', 'querystring', 'cookie', 'localStorage', 'htmlTag', 'path', 'subdomain'],
      caches: ['localStorage', 'cookie'],
    },
  });

export default i18n;

index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import App from './App';

ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>,
  document.getElementById('root')
);

1
  • No i18n.js tem a importação import { resources } from './locales'; Onde está o export correspondente a esta importação ? Essa importação espera um ficheiro locales.js no mesmo local onde i18n.js está o que não corresponde à estrutura que vejo que indicou.
    – Isac
    Commented 5/05 às 0:55

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .