I get the following warnings on every eslint run with config following config. What is it caused by and how do I get rid of it?
eslint warnings
can't resolve reference #/definitions/basicConfig from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
.eslintrc.js
module.exports = {
extends: 'airbnb',
root: true,
env: {
browser: true,
jest: true,
},
plugins: ['react', 'jsx-a11y', 'import', 'jest'],
rules: {
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'react/jsx-filename-extension': [0],
'import/prefer-default-export': [0],
},
settings: {
'import/resolver': {
webpack: {
config: 'webpack.config.js',
},
},
},
parser: 'babel-eslint',
};
This error was caused by eslint-plugin-react package (which I found out following this airbnb config issue).
This PR solves the issue and contains more info. The gist is that it was fixed in version 7.2.0 of the eslint-plugin-react package, so all I needed to do was yarn upgrade eslint-plugin-react.
Related
After I set up ESLint, I got this error Plugin "react" was conflicted between ".eslintrc.js" and "BaseConfig » /frontend/node_modules/react-scripts/node_modules/eslint-config-react-app/base.js".
my .eslintrc.js is like
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'airbnb/hooks',
'plugin:#typescript-eslint/recommended',
'plugin:#typescript-eslint/recommended-requiring-type-checking',
'prettier',
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
plugins: [
'react',
'#typescript-eslint',
],
ignorePatterns: [
".eslintrc.js"
],
rules: {
'no-use-before-define': "off",
"#typescript-eslint/no-use-before-define": "off",
'import/prefer-default-export': "off",
'import/extensions': [
'error',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
'react/jsx-filename-extension': [
'error',
{
extensions: ['.jsx', '.tsx'],
},
],
'react/react-in-jsx-scope': 'off',
'no-void': [
'error',
{
allowAsStatement: true,
},
],
"react/function-component-definition": [
2,
{ "namedComponents": "arrow-function" }
]
},
settings: {
'import/resolver': {
node: {
paths: ['src'],
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
},
},
};
What I have done is
npx create-react-app my-app --template typescript
yarn run eslint --init
yarn add -D #typescript-eslint/eslint-plugin #typescript-eslint/parser
npx install-peerdeps --dev eslint-config-airbnb
How can I remove this error ?
You may need to dedupe eslint-plugin-react in your lockfile.
I fixed the issue by closing and reopening the project folder with code. There must have been a problem with the path name.
Hope this helps :)
I fixed this problem in this way:
if you are using npm remove the package-lock.json file.
if you are using the yarn remove the yarn.lock file.
and then remove the node_module folder and install all of the dependencies again.
You have to disable eslint while react-scripts start.
As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file.
For example in .env:
DISABLE_ESLINT_PLUGIN=true
Been there too, and finding the exact answer to this issue is hard to find.
The best solution for now is to remove eslintrc.json.
I faced the same error. After trying every solution I found on the internet, removing eslintrc.js actually helped.
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 have configured React, Storybook, Tailwind. everything worked properly. But After I added eslint it breaks storybook for every eslint errors.
.storybook/main.js
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/preset-create-react-app',
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
Error
[ESLintError:
src/stories/Button.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
src/stories/Header.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
src/stories/Page.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
Line 28:11: " can be escaped with ", “, ", ” react/no-unescaped-entities
Line 28:16: " can be escaped with ", “, ", ” react/no-unescaped-entities
Search for the keywords to learn more about each error.]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
error Command failed with exit code 1.
In my case I just wanted to disabled eslint errors during development so
DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public
did the trick
Thanks for the question, I was struggling with this issue for a couple of hours...
The steps of my investigation are the following:
display the existing Webpack config:
webpackFinal: async (config) => {
console.log(config);
analyse configuration
bail: false,
stats: { preset: 'none', logging: 'error' },
the bail parameter is false what's fine, but preset: 'none' means to show nothing - let's park it, we will need it later
proof: https://webpack.js.org/configuration/stats/#stats-presets
by default the ESLintPlugin throws errors and fails
proof: https://webpack.js.org/plugins/eslint-webpack-plugin/#failonerror
trying to change the parameter failOnError to false, e.g.
new ESLintPlugin({
context: path.resolve(__dirname, '..'),
overrideConfigFile: path.resolve(__dirname, '..', '.eslintrc'),
extensions: ['js', 'jsx'],
files: ['./components', './theme'],
failOnError: false,
})
Now we can see warnings if we change the stats parameters:
webpackFinal: async config => {
config.stats = undefined;
config.plugins.push(
Running storybook with the ESLINT_NO_DEV_ERRORS option also does the trick:
ESLINT_NO_DEV_ERRORS=true npm run storybook
You can also set it and forget it as a storybook environment variable.
this is happened because ESLint is throwing errors instead of warnings!
and storybook can not start with that errors.
you have two ways to solve this problem!!
set 'warn' for all of the rules that you are using in your ESLint config file
use this package https://github.com/bfanger/eslint-plugin-only-warn to change all of rules to 'warn' automatically.
I'm getting these error messages:
but i don't get any errors on vscode
this is my elint configration
const path = require('path');
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'airbnb',
'prettier',
'prettier/react',
'plugin:react/recommended',
'plugin:prettier/recommended',
'plugin:import/errors',
'plugin:import/warnings',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react', 'import', 'prettier'],
rules: {
'prettier/prettier': 'error',
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/named': 'off',
'import/no-self-import': 'off',
'import/no-extraneous-dependencies': 'off',
'react/jsx-props-no-spreading': 'off',
'import/prefer-default-export': 'off',
'no-param-reassign': [
'error',
{ props: true, ignorePropertyModificationsFor: ['draft'] },
],
},
settings: {
'import/resolver': {
alias: {
map: [['#', path.join(path.resolve(__dirname, './src'))]],
extensions: ['.js', '.jsx', '.json'],
},
node: {
extensions: ['.js', '.jsx'],
},
},
},
};
whats wrong with my configuration?
this is my component that i getting error:
as you see there is no error.
note: eslint and prettier extensions are enabled and work successfully. and before these errors , i got errors and vscode displays errors and i'm sure vscode eslint works.
what is wrong?
I think the errors are caused by the webpack configuration which ships with create-react-app.
The webpack process started behind the scenes when calling npm start in your project doesn't know anything about the aliases you specified in your custom eslint configuration file. Your custom eslint-config-file is only used by your editor (or more specific by your enabled eslint-extension) and I believe there is no smooth way to change this (without creating your own webpack config).
See also https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor which describes what I have written above.
Note that even if you customise your ESLint config, these changes will only affect the editor integration. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
I've recently created a project with create-react-project.
The problem is that, while I'm developing, every time there's a problem with ESLint, the build breaks and doesn't compile the code.
Can I keep the build running while still having ESLint running and reporting errors that I will fix later?
If you want to force ESLint to always emit warnings (that will not stop you build) instead of errors, you need to set emitWarning: true:
{
enforce: 'pre',
include: paths.appSrc,
test: /\.(js|jsx|mjs)$/,
use: [{
loader: require.resolve('eslint-loader'),
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
emitWarning: true, 👈 HERE
},
}],
},
As stated in the docs:
Errors and Warning
By default the loader will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using emitError or emitWarning options:
emitError (default: false)
Loader will always return errors if this option is set to true.
emitWarning (default: false)
Loader will always return warnings if option is set to true. If you're using hot module replacement, you may wish to enable this in development, or else updates will be skipped when there's an eslint error.
...
just add DISABLE_ESLINT_PLUGIN=true in your .envfile
cheers !
since eslint-loader is now deprecated and eslint-webpack-plugin is now used in create-react-app check the docs, I was able to solve a similar issue by adding two option to the eslint-webpack-plugin
after ejecting your react app, add these options to the ESLintPlugin options:
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
failOnError: false, <== `This one`
emitWarning: true, <== `And this one`
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error'
})
}
}
})
I might be late for the answer but if you add
ESLINT_NO_DEV_ERRORS=true
in the .env file then the error is sorted.
P.S: it works with react script 4.0.3 and above
For people wanting to solve this problem in 2021, you can simply set following in your .env.development file to ignore TypeScript Errors
TSC_COMPILE_ON_ERROR=true
Source: https://create-react-app.dev/docs/advanced-configuration/#:~:text=TSC_COMPILE_ON_ERROR
Also, to ignore ESLint errors, use craco to override eslint-webpack-plugin default configuration to ignore errors in development environment.
const eslintWebpackPlugin = require("eslint-webpack-plugin");
const process = require("process");
module.exports = {
webpack: {
configure: (config) => {
config.plugins.forEach((plugin) => {
if (plugin instanceof eslintWebpackPlugin) {
// Ignore ESLint Errors.
plugin.options.failOnError = process.env.NODE_ENV === "production";
}
});
return config;
},
},
};
Ok I just commented this lines from my webpack config
// {
// test: /\.(js|jsx|mjs)$/,
// enforce: 'pre',
// use: [
// {
// options: {
// formatter: eslintFormatter,
// eslintPath: require.resolve('eslint'),
//
// },
// loader: require.resolve('eslint-loader'),
// },
// ],
// include: paths.appSrc,
// },