Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

O código aparentemente está correto, mas mesmo assim não está funcionando

Referente ao curso React: desenvolvendo em React Router com JavaScript, no capítulo Rotas aninhadas e atividade Desafio: simplificando caminhos

por Geovana Da Frota Ferreira
| 51.9k xp | 15 posts

Estou enfrentando dois problemas, um relacionado ao desafio e outro relacionado a importação de MarcaRegistrada como um componente React.

O primeiro é que, mesmo criando o componente PaginaPadrao e adicionando Outlet no arquivo, bem como adicionando no Routes.jsx a rota pai PaginaPadrao e as rotas filhos Inicio e SobreMim, o Banner não está carregando em nenhuma das páginas.

O segundo problema está relacionado a importação de um svg como um componente React; decobri que eu não tinha o pacote SVGR instalado, e instalei tanto pelo npm quanto pelo yarn, mas nenhuma sequer deu certo. Recorri ao Gemini e ele disse que eu teria que criar um arquivo chamado webpack.config.js e adicionar o seguinte código:

const path = require('path');
const { default: svgrPlugin } = require('@svgr/webpack');

module.exports = {
  // ... other Webpack configurations
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: require.resolve('@svgr/webpack'),
            options: {
              // Customize SVGR options here (optional)
              icon: true, // If you're using icons
              titleProp: true, // If you want to use the title attribute
            },
          },
        ],
      },
    ],
  },
};

Repositório do projeto: https://github.com/vana-cyber/ola-mundo

3 respostas
por Luis Dias
| 2736k xp | 2485 posts
Developer PHP (⌐■_■)

Oi Geovana,

Analisando seu relato e o código do seu repositório, identifiquei um ponto que pode estar causando o problema que você descreveu. 👋

  • PaginaPadrao

O problema no seu componente PaginaPadrao é que a função não está retornando nada. Você precisa adicionar a instrução return para que o JSX seja renderizado corretamente.

Veja como deve ficar o código:

import Banner from "components/Banner";
import { Outlet } from "react-router-dom";

export default function PaginaPadrao() {
    return (
        <main>
            <Banner />
            <Outlet />
        </main>
    );
}
  • Importação de SVG

A configuração do webpack.config.js que você adicionou está correta para usar o @svgr/webpack. No entanto, para que o webpack reconheça esse arquivo de configuração, você precisa executar o comando npm run start ou yarn start novamente para que as alterações sejam aplicadas. 💡

Além disso, verifique se o arquivo webpack.config.js está na raiz do seu projeto.

Para saber mais: Documentação oficial do SVGR - A documentação oficial do SVGR oferece informações detalhadas sobre como configurar o SVGR com Webpack, incluindo opções de configuração e exemplos de uso.

Continue praticando e explorando as possibilidades do React! 💪

por Geovana Da Frota Ferreira
| 51.9k xp | 15 posts

Olá, Luis! Obrigada por responder.

Mesmo após seguir os procedimentos, ainda continuo enfrentando problemas com relação à instalação do pacote SVGR. A página não está carregando. As seguintes mensagens aparecem no console: Repositório: https://github.com/vana-cyber/ola-mundo Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Luis Dias
| 2736k xp | 2485 posts
Developer PHP (⌐■_■)

Geovana,

Tente essa nova abordagem com foco no Vite

Problema com SVG no Vite

Se você está usando Vite e não Webpack, a configuração é diferente.

Para resolver o problema do SVG:

  1. Primeiro, instale o plugin do SVGR para Vite:
npm install vite-plugin-svgr
  1. Configure o vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    alias: {
      assets: "/src/assets",
      json: "/src/json",
      components: "/src/components",
      Rodape: "/src/components/Rodape",
      paginas: "/src/paginas"
    },
  },
})
  1. Importe o SVG usando a sintaxe especial do Vite:
import { ReactComponent as MarcaRegistrada } from './marca_registrada.svg?react';

Observação: Não é necessário criar um webpack.config.js quando estiver usando Vite, pois o Vite tem seu próprio sistema de configuração.

Se ainda assim não funcionar, você pode tentar uma abordagem alternativa usando o próprio Vite:

import marcaRegistrada from './marca_registrada.svg';

function Rodape() {
    return (
        <footer>
            <img src={marcaRegistrada} alt="Marca registrada" />
        </footer>
    );
}

Boa sorte! 🍀