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.
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 tohelp with testing .
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
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:
connect
function anymore, I use the useSelector hook instead.redux store
. Here is an example on how to do that using React Testing Library .Original problem line :
import ButtonBack from '../ButtonBack';
Fixed Line:
import { ButtonBack } from '../ButtonBack';
I had the same issue when I imported class components and it was such a simple solution in the end.
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
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"]
}
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.
You could add an exception in .eslintrc
"rules": {
"import/prefer-default-export": "off"
}
您也可以在导出时使用别名,在导入时使用相反的别名
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';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.