How do I resolve eslint import/no-named-as-default
JavascriptEslintEs6 ModulesJavascript Problem Overview
After looking at the documentation for the import/no-named-as-default eslint rule, I'm still confused about what exactly I'm doing wrong.
I have the following file structure
.
├── ButtonBack.css
├── ButtonBack.jsx
├── __tests__
│ └── ButtonBack.test.jsx
└── index.js
The ButtonBack.jsx contains the following code
import React from 'react';
import PropTypes from 'prop-types';
export default class ButtonBack extends React.Component {
... code removed to keep example short ...
}
_tests_/ButtonBack.test.jsx contains the following code
import React from 'react';
import { shallow } from 'enzyme';
import ButtonBack from '../ButtonBack'; // <== this line has an eslint warning
... code removed to keep example short ...
The problem is, my linter says that import ButtonBack from '../ButtonBack
violates the following lint rules:
I can't figure out why my import statement violates the lint rule. Removing the name of the class in ButtonBack.jsx (export default class extends React.Component
) does not solve the issue either.
Javascript Solutions
Solution 1 - Javascript
Ran into this same issue and from what I'm seeing you're going to just have to disable that rule (that's what I did at least)
"Unfortunately, React + Redux is the most common scenario. However, there are lots of other cases where HOCs will force developers to shut down this rule."
https://github.com/benmosher/eslint-plugin-import/issues/544
https://github.com/reactjs/react-redux/issues/119
https://github.com/18F/calc/pull/1235
.eslintrc
"rules": {
"import/no-named-as-default": 0
}
Solution 2 - Javascript
Ran into this issue because I am using React
+ Redux
:
export class ButtonBack extends React.Component {
// code removed
}
export default connect(null, null)(ButtonBack);
So with the code above this import will give me a warning:
import ButtonBack from ./ButtonBack;
changing to the following fixes the problem:
import ConnectedButtonBack from ./ButtonBack;
Not exporting class ButtonBack
would also fix the problem, but I like to export it to help with testing.
UPDATE 2019
My preferred solution for this issue is to have separate files for components and container. I think this keeps files smaller and easier to understand. In this case I would have two files:
components/ButtonBack.js
containers/ButtonBackContainer.js
UPDATE 2020
The no-named-as-default eslint rule is meant to help you in case you mistakenly import a default export
when you meant to import a named export
.
I haven't ran into this issue for a while now because:
- I avoid default exports when I can, as I think they can lead to mild confusion.
- I don't use the
connect
function anymore, I use the useSelector hook instead. - I usually test the component together with the
redux store
. Here is an example on how to do that using React Testing Library.
Solution 3 - Javascript
Original problem line :
import ButtonBack from '../ButtonBack';
Fixed Line:
import { ButtonBack } from '../ButtonBack';
Solution 4 - Javascript
I had the same issue when I imported class components and it was such a simple solution in the end.
Solution
Just add
"parser": "babel-eslint"
to your eslintrc config file after you installed this package with
npm install babel-eslint --save-dev
or
yarn add babel-eslint --dev
Explanation
babel-eslint tells eslint to use the configuration specified in my Babel configuration file. There I have specified that I use React and that's why eslint will not complain anymore. This is how my Babel configuration file looks like:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
Solution 5 - Javascript
This is rather silly for esLint but what I did to resolve it was to check file that is exporting, I accidentally had export class then export default connect. Still had lint error, re wrote import line in parent and eslint cleared warning.
Solution 6 - Javascript
You could add an exception in .eslintrc
"rules": {
"import/prefer-default-export": "off"
}
Solution 7 - Javascript
You can as well use an alias at export and the opposite alias on import