I am getting this eslint error in index.js file:

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

page / index.js

export { default } from './test';

page / test.jsx

import React from 'react';

const Test = () => {
  return <div>Test</div>;
};
export default Test;

routes.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const testPage = React.lazy(() => import('./page'));

function Routes() {
  return (
    <Switch>
      <Route path="/" exact ponent={testPage} />
    </Switch>
  );
}
export default Routes;

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/remended", "airbnb"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never"
      }
    ],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  },
  "settings": {
    "import/extensions": [".js", ".jsx"],
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

What would be the proper way to resolve it, without disabling that?

I am getting this eslint error in index.js file:

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

page / index.js

export { default } from './test';

page / test.jsx

import React from 'react';

const Test = () => {
  return <div>Test</div>;
};
export default Test;

routes.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const testPage = React.lazy(() => import('./page'));

function Routes() {
  return (
    <Switch>
      <Route path="/" exact ponent={testPage} />
    </Switch>
  );
}
export default Routes;

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/remended", "airbnb"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never"
      }
    ],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  },
  "settings": {
    "import/extensions": [".js", ".jsx"],
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx"]
      }
    }
  }
}

What would be the proper way to resolve it, without disabling that?

• javascript
• reactjs
• eslint

3 Answers 3

export { default as Test } from './test';

if above one is used then you've to do named import instead of default import like this

import { Test } from './pathToTestFolder'

this is not wrong, but to still using the default import you've to export test by default. You can do this

page/index.js

import Test from './test'

export default Test

now you can use default import like this
routes.js

import Test from './pathToTestFolder'

or according to your route file

const testPage = React.lazy(() => import('./page'));

You cannot export default because it's a reserved keyword. You could replace the line with :

export { default as Test } from './test';

In situations where named and default export is conflicting with ESLint rules, you can use * export approach as follows:

export * from './test';