javascript - Error de ESLint: 'default' está restringido para ser utilizado como un nombre exportado
Estoy recibiendo este error de eslint en el archivo index.js:
'default' tiene restringido su uso como nombre 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;
rutas.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"]
}
}
}
}
¿Cuál sería la forma adecuada de resolverlo, sin desactivar eso?
Respuesta #1
export { default as Test } from './test';
si se usa el de arriba, entonces tienes que hacer una importación con nombre en lugar de una importación por defecto así
import { Test } from './pathToTestFolder'
esto no está mal, pero para seguir usando la importación por defecto tienes que exportar test por defecto. Puedes hacer esto
page/index.jsimport Test from './test'
export default Test
ahora puedes usar la importación por defecto así
routes.js
import Test from './pathToTestFolder'
o según tu archivo de ruta
const testPage = React.lazy(() => import('./page'));
Respuesta #2
No puedes exportar default porque es una palabra clave reservada. Podrías reemplazar la línea con :
export { default as Test } from './test';
