How to resolve the ESLint error "Prefer default export ..."?

Question

I have the following module, in which there is a named function... eslint ( airbnb ) is raising an error:

8:1 error Prefer default export import/prefer-default-export

How should I restructure my code to comply to this requirement?

exports / imports should be at the beginning of the code...

module

import fetch from 'node-fetch';

const normalize = json => json.categories.map(category => ({
  id: category.catId,
  name: category.catName,
}));

export const getCategories = async () => {
  const response = await fetch(
    'http://mockbin.org/bin/0535d3fb-74f6-43a6-b4d4-461d84795be4',
    {
      method: 'GET',
      headers: { accept: 'application/json' },
    },
  );

  const json = await response.json();

  return normalize(json);
};

Just as the rule says... use default export instead of named export — CertainPerformance, Dec 20 '18 at 07:33
I understand but how ... where should I place the export default ..I am rewriting my code with ES6 ... which is quite new for mr.. — , Dec 20 '18 at 07:34
You say the exports should be at the *beginning* of the code? That sounds a bit odd, can you tell me what rule name that is so I can look it up? Of course you can just `export default ` right after your imports, but it seems odd to have that before (possible) module state variables / operations — CertainPerformance, Dec 20 '18 at 07:37
yes that's my point ... If I try to write the export default right after the imports, then eslint is raising another error : was used before it was defined — , Dec 20 '18 at 07:40
That's not requiring that the export be *at the beginning* - exactly the opposite, I would think. It might be helpful if you posted some example code so there's something concrete people can plug into the linter and try to fix — CertainPerformance, Dec 20 '18 at 07:42
Can you try export default async () => {} for getCategories, then you can import with any name you want. — Diljohn5741, Dec 20 '18 at 07:53

score 2 · Accepted Answer · answered Dec 20 '18 at 07:54

The general idea is to change your named export to a default export - the syntax to use is export default <something>. Default exports aren't named, so you'll either have to remove the getCategories:

export default async () => {

Or, if you like the function being in a usefully-named variable, you'll have to define the function ahead of time, and then export it:

const getCategories = async () => {
  const response = await fetch(
    'http://mockbin.org/bin/0535d3fb-74f6-43a6-b4d4-461d84795be4',
    {
      method: 'GET',
      headers: { accept: 'application/json' },
    },
  );

  const json = await response.json();

  return normalize(json);
};
export default getCategories;

(though if the module/file name is getCategories, which it probably should be, this wouldn't be very useful, I think)

Both of the above approaches pass the no-use-before-define rule as well.

How to resolve the ESLint error "Prefer default export ..."?

1 Answers1