What does this error mean? (Assign Arrow Function to a variable before exporting as module default import/no-Anonymous-default-export)

Asked

Viewed 3,405 times

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>
javascript react eslint

  • I don’t know anything about React, but it seems to me to be saying something after the => this HTML code wasn’t meant to be inside a {}? of the kind: default () => { codigo html }, maybe with HTML code between quotes inside, something like{" .... "}. I don’t know, just kick, it might be nothing like that.

  • This answers your question? React error as I resolve?

2 answers

4


Assign Arrow Function to a variable before exporting it as your module’s default...

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;

To export a function you should declare a 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> 
}

  • What I don’t understand in the course I learned that can this way!

  • Now this error: Unexpected default export of Anonymous Function import/no-Anonymous-default-export

  • Sorry, I did in a hurry and didn’t even pay attention... Even exporting a function you need to name it, corrected already in the example. If you read the error it complains that the function cannot be anonymous, anonymous functions are basically functions without names.

  • Aeeeeeee! Now yes guy it was worth me to two weeks trying to fix it, I was almost giving up. THANKS

  • Don’t forget to mark the answer as correct, it helps those who are going through the same problem to find the solution(without having to read all the haha comments)

4

The cause of the error

This "error" is related to a Eslint-plugin-import: import/no-anonymous-default-export. The rule has the following definition:

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.

In summary, this rule will report an error (or Warning) if the default export does not have a name, and the rule was created to encourage reuse of the name that was exported where it is being imported, for example:

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.

That is harmful?

The code will continue to work with unnamed Exports, but the Eslint serves precisely to help have standards and conventions in a project, in addition to reporting possible mistakes.

How do I make it work the way it is now?

  1. You can ignore this rule with eslint-disable in the file in question:
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {};
  1. You can disable this rule for any file, just add in the settings (an archive .eslint.* or a field eslintConfig in the package.json) that you want to disable the rule:
{
  // ...
  rules: {
    // ...
    'import/no-anonymous-default-export': 'off',
  }
}
  1. You can leave the rule enabled, but allow Arrow functions are exported without a defined name. Similar to step 2, but instead of disabling the rule we just set an extra option for it:
"import/no-anonymous-default-export": ["error", {
  "allowArrowFunction": true,
}]

More details of this rule can be found on link already quoted.

Browser other questions tagged javascript react eslint

You are not signed in. Login or sign up in order to post.