javascript - How do I resolve eslint import/no-named-as-default

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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:
import/no-named-as-default
import/no-named-as-default-member
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.  
                Are there any other exports in ButtonBack.jsx, or just the export default class ButtonBack?
– btmills
                Jun 8, 2017 at 14:15
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
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.
                another solution would be "  import { ButtonBack } from ./ButtonBack;  "   I prefer this solution if I want to keep the same component name in the import also.
– arun8
                Jun 7, 2019 at 5:38
                @arun8 if you are using redux, thats not a solution. import { ButtonBack } from ./ButtonBack; and import ConnectedButtonBack from ./ButtonBack; are two different things. One is the plain component and the other is the connected component.
– Doug
                Jun 7, 2019 at 11:55
                Personally I feel that the calling something "ConnectedButtonBack" is very clunky. Additionally I think having two files that don't serve a hugely different purpose and are directly linked is also clunky. I personally call my pure function _ButtonBack, then export the connected component. That way I can do import { _ButtonBack } if I need the pure version (usually just for tests) and import ButtonBack if I need the connected version. It's less noise than adding the words "Pure" or "Connected" or similar all over the place. Just my opinion!
– Matt Fletcher
                Feb 25, 2020 at 12:09
                @MattFletcher Naming it _ButtonBack gives the impression it is private and should not be touched. Don't you think that goes against React's design--where we want to have reusable components?
– Doug
                May 4, 2020 at 23:44
                I'm relatively new to React and TS so I'm still bumping into things that might be more obvious to more experienced React/TS developers. The update you made for 2020 ended up being the issue I was running into.
– WTFranklin
                Jul 27, 2022 at 15:06
                Whilst this may work in the general case, you need to be careful if you are using react/redux, and therefore wrapping your react component in the connect()(yourCompnent) method from redux. If you wrap the export in curly braces, you will not export the connected component.
– Powderham
                Jun 22, 2018 at 12:00
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
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"]
I also encountered this problem while importing faker js
I am importing like this:
import faker from '@faker-js/faker'
and getting eslint error:
warning  Using exported name 'faker' as an
identifier for default export  import/no-named-as-default
The solution which worked for me is :
import { faker } from '@faker-js/faker'
So, in your case, you just need to change your importing to this
import {ButtonBack} from '../ButtonBack';
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.