This is the error I am receiving when yarn deploying. Cant seem to figure out what happened. I deployed 5 minutes before this without any issues.
Error: Command failed with exit code 1: node_modules/.bin/next build
warn - The `target` config is deprecated and will be removed in a future version.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
Failed to compile.
./components/layout/Header.tsx
66:117 Error: Insert `⏎··········` prettier/prettier
67:1 Error: Delete `··` prettier/prettier
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Loaded env from /Users/coreykaminski/VCXNFT-1/landing-page/.env.local
info - Checking validity of types...
error Command failed with exit code 1.
This is the eslintrc.js
plugins: ["#typescript-eslint"],
extends: ["standard", "plugin:prettier/recommended", "plugin:node/recommended"],
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaVersion: 12,
},
rules: {
"max-len": ["error", { code: 160, ignoreUrls: true }],
"node/no-unsupported-features/es-syntax": ["error", { ignores: ["modules"] }],
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
},
};
this is the json
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
"plugins": ["#typescript-eslint", "react"],
"rules": {
"prettier/prettier": ["error", {}, { "usePrettierrc": true }],
npx prettier --write ./components/layout/Header.tsx
or disable prettier eslint.
"prettier/prettier": [
0,
{
endOfLine: "auto",
},
],
Related
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'm trying to deploy react app to heroku. It's deployed successfully but it throws me an error :
My .eslintrc file looks like this :
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"airbnb",
"prettier"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"no-multi-spaces": "error",
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"import/imports-first": [
"error",
"absolute-first"
],
"no-shadow": [
2,
{
"allow": [
"done"
]
}
],
"react/state-in-constructor": 0,
"react/jsx-fragments": 0,
"react/jsx-props-no-spreading": 0,
"react/jsx-curly-newline": 0,
"react/jsx-wrap-multilines": ["error", {
"declaration": "parens-new-line",
"assignment": "parens-new-line",
"return": "parens-new-line",
"arrow": "parens-new-line",
"condition": "parens-new-line",
"logical": "ignore",
"prop": "ignore"
}],
"import/no-unresolved": 0,
"new-cap": 0,
"semi": 0,
"global-require": 0,
"no-underscore-dangle": 0,
"arrow-body-style": 0,
"no-console": 0,
"react/forbid-prop-types": 0,
"jsx-a11y/href-no-hash": 0,
"import/prefer-default-export": 0,
"react/prop-types": 0,
"comma-dangle": [2, "always-multiline"],
"arrow-parens": ["warn", "as-needed", { "requireForBlockBody": false }],
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to", "hrefLeft", "hrefRight" ],
"aspects": [ "noHref", "invalidHref", "preferButton" ]
}]
},
"settings": {
"import/resolver": {
"node": {
"paths": [
"src",
"src/js"
]
}
}
},
"parser": "babel-eslint"
}
I reload the page where app is deployed and I can see my app for a sec and error arises.
Another app throws similar err:
It complains about airbnb. What should I reinstall or install or maybe amend the .eslintrc file ?
I ran into this issue as well. It is odd that heroku is triggering eslint on build. This is likely occurring because Heroku by default skips dev dependencies (NPM_CONFIG_PRODUCTION=TRUE) but airbnb is still being used in .eslintrc in the "extends" section. This is a workaround:
To prevent this error allow dev dependencies to be installed in prod by using: heroku config:set NPM_CONFIG_PRODUCTION=false -a appname
If you have unresolved linting/prettier errors or warnings that you don't want to appear in prod, use this to stop them from appearing: heroku config:set DISABLE_ESLINT_PLUGIN=true -a appname
If you are worried about stale npm module caching affecting your heroku deployment disable it with this: heroku config:set NODE_MODULES_CACHE=false -a appname
it will force heroku to rebuild all dependencies on every deployment
more info is here: https://devcenter.heroku.com/articles/nodejs-support
I have tried to google this but to no avail so far...
In a standard React project, every component typically begins with import React from 'react'. For me, with Eslint v6.0.0 configured to extend: 'standard', "eslint:recommended", "plugin:react/recommended" I always get this warning in vscode:
Definition for rule 'no-useless-catch' was not foundeslint(no-useless-catch)
.. for the very first import in a javascript file.
Any ideas on why this is happening? I don't want to disable the rule because it does seem useful but how do I configure eslint to not complain about this in literally every file in the project?
Here is the complete eslintrc file:
module.exports = {
env: {
browser: true,
es6: true
},
parser: 'babel-eslint',
extends: [
'standard',
"eslint:recommended",
"plugin:react/recommended"
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},
plugins: [
'react'
],
rules: {
"quotes": ["warn", "single"],
"indent": ["warn", "tab", { "ignoreComments": true }],
"no-tabs": 0,
"padded-blocks": 0,
"semi": ["warn", "never"],
"no-trailing-spaces": 0,
"spaced-comment": 0,
"no-multiple-empty-lines": 0,
"space-before-function-paren": 0,
"camelcase": 0,
"prefer-const": "warn",
"space-infix-ops": "warn",
"no-case-declarations": 0,
}
}
Nevermind, figure it out ... I was using eslint 5.6 and the no-useless-catch rule was not introduced until 5.11 hence the error...
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