[Sugestão] Erro

2
respostas

Referente ao curso React Native: criando menu e navegando entre telas, no capítulo Apresentando a navegação e atividade Introdução do projeto

por Marcos Vinícius Costa de Carvalho

| 49.7k xp | 2 posts

Pessoal, encontrei esse erro após iniciar o projeto do zero por conta de compatibilidade e descobri que ele está relacionado com a importação de arquivos .svg. O React native não suporta importação de arquivos desse tipo diretamente da forma que está originalmente no projeto. Para ajustar, é necessário instalar algumas dependências no seu projeto:

1 - Instale o pacote react-native-svg:

npm install react-native-svg

2 - Instale o pacote para transformar o SVG em formato que o react native consegue ler como um componente:

npm install --save-dev react-native-svg-transformer

3 - Conforme orientação dos autores do pacote svg transformer, altere totalmente seu arquivo metro.config.js para o seguinte código:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

Isso solucionou meu problema, espero ter ajudado quem teve o mesmo problema por conta dos vídeos desse curso estarem meio desatualizados.

2 respostas

por Larissa Drechsler

| 134.4k xp | 4 posts

07/07/2023

Estou com o mesmo problema. Infelizmente seu passo a passo não funcionou, quando altero o arquivo metro.config.js da erro. Apenas comentei todas as linhas que tem os imports .svg e finalmente consegui rodar o projeto. Caso mais alguém esteja com esse problema e queira continuar o curso mesmo assim, é uma opção.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Larissa Drechsler

| 134.4k xp | 4 posts

07/07/2023

Para rodar com o svg, no meu caso, instalei todos os pacotes descritos acima, mas precisei substituir todo o conteudo do arquivo metro.js.config para o seguinte código: seguindo a documentação desse site: https://github.com/kristerkari/react-native-svg-transformer tem 3 opções de código que podem ser adicionados no arquivo metro.js.config de acordo com a versão do react instalada.

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();