javascript - Erro do ESLint: 'default' é restrito de ser usado como um nome exportado
Estou recebendo este erro do eslint no arquivo index.js:
'default' é restrito de ser usado como um nome exportado no-restricted-exports
página/index.js
export { default } from './test';
página/test.jsx
import React from 'react';
const Test = () => {
return <div>Test</div>;
};
export default Test;
rotas.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 component={testPage} />
</Switch>
);
}
export default Routes;
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "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"]
}
}
}
}
Qual seria a maneira adequada de resolver isso, sem desativar isso?
Resposta #1
export { default as Test } from './test';
se o acima for usado, então você precisa fazer importação nomeada em vez de importação padrão assim
import { Test } from './pathToTestFolder'
isso não está errado, mas para ainda usar a importação padrão você precisa exportar test por padrão. Você pode fazer isso
page/index.jsimport Test from './test'
export default Test
agora você pode usar a importação padrão assim
routes.js
import Test from './pathToTestFolder'
ou de acordo com seu arquivo de rotas
const testPage = React.lazy(() => import('./page'));
Resposta #2
Você não pode exportar default porque é uma palavra reservada. Você poderia substituir a linha por :
export { default as Test } from './test';
