in react 17 is not necessarily use
import React from 'react';
but if i don't have it, so eslint gave me error
'React' must be in scope when using JSX react/react-in-jsx-scope
any idea how modify .eslintrc.js
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
plugins: [
"react",
"react-hooks",
"jsx-a11y",
],
rules: {
strict: 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
settings: {
react: {
version: "detect"
}
}
}
for react 17?
Thank's a lot
You can read about it in React docs.
If you are using eslint-plugin-react, the react/jsx-uses-react and react/react-in-jsx-scope rules are no longer necessary and can be turned off or removed.
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}
react-in-jsx-scope on github.
To make it work, you should add those rules to your eslint config, see Extending or replacing the default ESLint config for Create-React-App specifics, every framework should have related section in their docs.
You need to add plugin:react/jsx-runtime to extends in the .eslintrc.js file.
like is:
module.exports = {
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:react/jsx-runtime',
]
}
Refer here
Related
I've been smashing my face into this problem the entire morning.
I recently assembled a new project with React 18, React Router 6, TypeScript, Webpack 5, eslint, and prettier.
Things were going fine until I tried out the useParams hook, and now my linter keeps printing out the following error:
/.../index.tsx
9:41 error Parsing error: Unexpected token prettier/prettier
✖ 1 problem (1 error, 0 warnings)
I have been searching around on Google, but I have not found anything talking about this issue directly. I'm not sure what to do at this point other than remove prettier from the project.
Here's my eslintrc:
{
"root": true,
"parser": "#typescript-eslint/parser",
"plugins": [
"react",
"#typescript-eslint",
"prettier"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"settings": {
"import/resolver": {
"alias": [
["components", "./src/components"],
["routes", "./src/routes"],
["views", "./src/views"]
]
},
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"es2021": true,
"node": true
}
}
Prettier config:
{
"arrowParens": "avoid",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"bracketSameLine": false,
"jsxSingleQuote": true,
"parser": "babel",
"printWidth": 80,
"proseWrap": "preserve",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"endOfLine": "auto",
"useTabs": false
}
and the offending page:
import React from 'react';
import { useParams } from 'react-router-dom';
type ParamTypes = {
id: string
};
const Customer: React.FC = () => {
const { id } = useParams<ParamTypes>();
return <div>{id}</div>;
};
export default Customer;
According to Prettier, the offending character is the final parenthesis:
const { id } = useParams<ParamTypes>();
^
I figured it out.
The issue was in my prettier config: "parser": "babel". According to the docs, this does not need to be set, since Prettier can infer which parser it needs to use based on the file.
Removing this setting has briefly restored my sanity. Hooray.
Mystery solved.
I'm trying to create a rule to have a one empty line between internal and external imports.
.eslintrc.json:
{
"parser": "#typescript-eslint/parser",
"env": {
"es6": true,
"node": true,
"jest/globals": true,
"browser": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2019,
"project": "tsconfig.json",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"import/order": [
"error",
{
"groups": [["builtin", "external"]],
"newlines-between": "always"
}
]
}
}
I have the following error:
Compiled with problems:X
ERROR
ESLint configuration in .eslintrc.json is invalid:
- Unexpected top-level property "import/order".
I modified an existing project with a similar eslint config to use your rule. It is working nicely. I have a suspicion your issue is that you don't have an extends property that includes the import rules. Here's my eslint config:
module.exports = {
root: true,
env: {
node: true,
},
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
'plugin:import/warnings', // <--- note this inclusion here
],
rules: {
'import/order': [
'error',
{
groups: [['builtin', 'external']],
'newlines-between': 'always',
},
],
},
};
When I run the linter, I get the expected error you want:
13:1 error There should be at least one empty line between import groups import/order
I would try playing with your extends property. I have some stuff in there you may not need at all, and I dont have the jsx stuff for this particular project, but hopefully this will get you started.
Install this dependency: eslint-import-resolver-typescript
# npm
npm i -D eslint-plugin-import #typescript-eslint/parser eslint-import-resolver-typescript
# yarn
yarn add -D eslint-plugin-import #typescript-eslint/parser eslint-import-resolver-typescript
And add import to your plugins :
"plugins": ["import"],
eslint-import-resolver-typescript
I am unable to build my Create-React-App due to Unexpected '!' in 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax. I want to know why does it happen and how can I fix it?
I am building a React project with React Map GL. Due to the transpiling issue of Mapbox GL version 2.0+ (related here: https://github.com/mapbox/mapbox-gl-js/issues/10173), one of the workarounds suggests that adding a worker-loader to the project.
However, even using the eslint-disable-next-line comment, I am still getting the build error.
Here is the code snipet where I am using the worker-loader
import mapboxgl from 'mapbox-gl';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass =
require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
Here is my eslint config file:
{
"env": {
"browser": true
},
"extends": [
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["react-hooks", "react", "import"],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"linebreak-style": ["error", "windows"],
"react/prop-types": 0,
"import/no-webpack-loader-syntax": "off"
}
}
After installing EsLint one of the errors that appears to me is the following:
Prop spreading is forbiddeneslint(react/jsx-props-no-spreading)
I want to create a rule in the EsLint configuration to ignore this error but the examples I found do not work.
This is the format to create a global exception:
...
"react/jsx-props-no-spreading": [{
"html": "ignore" / "enforce",
"custom": "ignore" / "enforce",
"exceptions": [<string>]
}]
...
And this is the format to create an exception in a specific file:
{
"rules": {...},
"overrides": [
{
"files": ["*-test.js","*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}
And here, the code that I currently have:
module.exports = {
extends: "../../.eslintrc.js",
rules: {
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
},
env: {
"jest": true
}
};
At the moment, I just keep giving the same error continuously.
Thank you.
Try turning off the "react/jsx-props-no-spreading" rule:
module.exports = {
extends: "../../.eslintrc.js",
rules: {
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
"react/jsx-props-no-spreading": "off",
},
env: {
"jest": true
}
};
As an example if there is not so much errors you can ignore them by
// eslint-disable-next-line
Or you can write for concrete error like
// eslint-disable jsx-props-no-spreading
I've setup eslint & eslint-plugin-react.
When I run ESLint, the linter returns no-unused-vars errors for each React component.
I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?
Example:
app.js
import React, { Component } from 'react';
import Header from './header.js';
export default class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
Linter Errors:
/my_project/src/components/app.js
1:8 error 'React' is defined but never used no-unused-vars
2:8 error 'Header' is defined but never used no-unused-vars
Here is my .eslintrc.json file:
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
First, install the following module npm install --save-dev eslint-plugin-react.
Then, in your .eslintrc.json, under extends, include the following plugin:
'extends': [
'plugin:react/recommended'
]
Source
To solve this only problem without adding new rules from react/recommended install eslint-plugin-react:
npm install eslint-plugin-react --save-dev
add in .eslintrc.js:
"plugins": ["react"]
and:
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
Since I found this while googling, you should know that this simple rule is enough to prevent this message:
react/jsx-uses-react
The react/recommended set of rules adds many other rules you may not want.
Quickest fix
To ignore all TitleCase variables, add this to your ESLint config:
{
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "React"
}
]
]
}
Correct fix
Use eslint-plugin-react to ignore React variables.
npm install eslint-plugin-react -D
Add this to your ESLint config:
{
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error"
}
}
Suggested fix
Use eslint-plugin-react to improve your JSX usage, not just to silence this error.
npm install eslint-plugin-react -D
Add this to your ESLint config:
{
"extends": [
"plugin:react/recommended"
]
}
If you use XO, refer to eslint-config-xo-react.
In my case I needed to add in your .eslintrc.js:
'extends': [
'plugin:react/recommended'
]
plus a specific tweaking to rid of preact import: import { h } from 'preact' but you can use this example to get rid of your specific warnings like so:
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^h$"
}
],
2022
If you're using ESLint with more configurations, be careful about the order of extends property array.
{
extends: [
'eslint:recommended',
'plugin:react/jsx-runtime',
'plugin:react/recommended',
'plugin:prettier/recommended',
'prettier',
],
plugins: ['react'],
//...
}
For example, make sure that you place 'plugin:react/recommended' after any other react configuration. Place 'react' as a plugin as well, and if you're using prettier make sure that you're following a proper configuration.
you can do it in .eslintrc.js
"rules": {
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": "error"
}
I have the same error as well as I started to learn React yesterday. The terminal show the error and it is pretty straightforward to ignore the unused variable error.
Error from the terminal:
Line 5:17: 'setBlog' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
Just add // eslint-disable-next-line this line before the variable which you have the error of unused variable. Like,
// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)
in eslintrc.js
adding following will solve the error
plugins: [
'react/recommended',
],
rules: {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
},
1st install npm
npm install --save-dev eslint-plugin-react
In Package.json replace eslintConfig declaration
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugin":"react/recommended",
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
},
If you create the project throught create-react-app CLI,You can npm run eject,and edit the package.json "eslintConfig" field,like this:
`"eslintConfig": {
"extends": "react-app",
"rules": {
"eqeqeq": "off",
"no-unused-vars": "off",
}
},`
the eslint will be closed
if you are using Create-react-app, there is no need to install anything or Eject, the simple solution is:
since the no-unused-vars-errors is thrown from webpackHotDevClient.js, you just need to go to /node_modules/react-scripts/config/webpack.config.dev.js.
on "new ESLintPlugin" rules just add :
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0
According to Official Docs of Eslint have you tried this
/* eslint no-unused-vars : "off" */
add this line as it is inside anywhere in your code. Hopefully you warning may go away and it may help you