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?

Answer 1

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';