How to fix Eslint error: 'default' is restricted from being used as an exported name in my React Typescript project

Question

I am updating eslint rules in my React project.

Currently I have this in the extend property inside eslintrc.js:

extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    // "plugin:@typescript-eslint/recommended",
    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
    // "plugin:eslint-comments/recommended",
    'plugin:react/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
  ],

I am getting this error:

error 'default' is restricted from being used as an exported name no-restricted-exports

Our pattern for components is like this:

Button/
 - Button.tsx
 - Button.spec.ts
 - Button.stories.tsx
 - index.ts

index.ts:

export { default } from './Button';

How to fix this? Or do I have to override this eslint rule somehow?

score 0 · Answer 1 · answered Jul 04 '22 at 11:12

You'll need to disable this rule - no-restricted-exports. Your .eslintrc file will look like this

{
  "extends": [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    // "plugin:@typescript-eslint/recommended",
    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
    // "plugin:eslint-comments/recommended",
    'plugin:react/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
  ],
  "rules": {
    "no-restricted-exports": 0,
  }
}

More documentation here - https://eslint.org/docs/latest/rules/no-restricted-exports.

Another option would be to not use default exports but instead do something like this:

export const Button = () => {...};

and in the index.ts file:

export * from './Button';

How to fix Eslint error: 'default' is restricted from being used as an exported name in my React Typescript project

1 Answers1