0

Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export

export default () =>
    <header className="header">
        <img src="" alt="" />
        <nav>
            <ul>
                <li>Home</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    </header> 
2
  • Não entendo nada de React, mas me parece estar falando alguma coisa depois do => esse código em HTML não era para estar dentro de um {}? do tipo: default () => { codigo html }, talvez com código HTML entre aspas dentro, algo como{" .... "}. Sei lá, só chute, pode ser não ser nada disso.
    – Inkeliz
    25/11/2020 às 12:56
  • Isto responde à sua pergunta? Erro de react como resolvo?
    – novic
    25/11/2020 às 14:40

2 Respostas 2

5

A causa do erro

Esse "erro" está relacionado a uma regra do eslint-plugin-import: import/no-anonymous-default-export. A regra possui a seguinte definição:

Reports if a module's default export is unnamed. This includes several types of unnamed data types; literals, object expressions, arrays, anonymous functions, arrow functions, and anonymous class declarations.

Ensuring that default exports are named helps improve the grepability of the codebase by encouraging the re-use of the same identifier for the module's default export at its declaration site and at its import sites.

Em resumo, esta regra reportará um erro (ou warning) caso o default export não possua um nome, e a regra foi criada para encorajar o reuso do nome que foi exportado onde está sendo importado, por exemplo:

const fetchSomething = () => {};
export default fetchSomething;

// ---

import fetchSomething from './fetch'; // Posso usar qualquer nome, mas por convenção uso o mesmo
export default () => {};

// ---

import fetchAnything from './fetch'; // Aqui decidi chamar de "fetchAnithing", em outro 
// lugar posso chamar de outra coisa.

Isso é danoso?

O código continuará funcionando com unnamed exports, mas o ESLint serve justamente para ajudar a ter padrões e convenções em um projeto, além de reportar possíveis erros.

Como faço funcionar do jeito que está agora?

  1. Você pode ignorar essa regra com eslint-disable no arquivo em questão:
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {};
  1. Você pode desabilitar essa regra para qualquer arquivo, basta adicionar nas configurações (um arquivo .eslint.* ou um campo eslintConfig no package.json) que você quer desabilitar a regra:
{
  // ...
  rules: {
    // ...
    'import/no-anonymous-default-export': 'off',
  }
}
  1. Você pode deixar a regra habilitada, porém permitir que arrow functions sejam exportadas sem um nome definido. Parecido com o passo 2, porém ao invés de desabilitar a regra apenas definimos uma opção extra dela:
"import/no-anonymous-default-export": ["error", {
  "allowArrowFunction": true,
}]

Mais detalhes desta regra podem ser encontrados no link já citado.

0
4

Atribua a arrow function a uma variável antes de exporta-la como default do seu módulo...

const myVar = () => {
  return  <header className="header">
        <img src="" alt="" />
        <nav>
            <ul>
                <li>Home</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    </header> 
}

export default myVar;

Para exportar uma função você deveria declarar uma function:

export default function myFunc() {
  return  <header className="header">
        <img src="" alt="" />
        <nav>
            <ul>
                <li>Home</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    </header> 
}
5
  • Isso que eu não entendo no curso eu aprendi que pode desse jeito!
    – user213676
    25/11/2020 às 13:04
  • Agora esse erro: Unexpected default export of anonymous function import/no-anonymous-default-export
    – user213676
    25/11/2020 às 13:06
  • Desculpa, fiz na pressa e nem prestei atenção... Mesmo exportando uma function você precisa nomea-la, corrigi já no exemplo. Se você ler o erro ele reclama que a função não pode ser anônima, funções anônimas são basicamente funções sem nomes.
    – Giovane
    25/11/2020 às 13:10
  • Aeeeeeee! agora sim cara valeu eu to duas semanas tentando arruma isso, tava quase desistindo. VALEU
    – user213676
    25/11/2020 às 13:13
  • Não esqueça de marcar a resposta como correta, ajuda a quem esta passando pelo mesmo problema a encontrar a solução(sem ter de ficar lendo todos os comentários haha)
    – Giovane
    25/11/2020 às 13:25