After running command ,,npm run lint" (lint stands for ,,next lint"), I get error.:
Failed to load config "next/core-web-vitals" to extend from.
Referenced from: /Users/filiptaticek/Desktop/.eslintrc.json
I don't have any .eslintrc.json file on my Desktop and I have this issue even when I make a new NextJS project.
I have .eslintrc.json in my directory with content:
{
"extends": "next/core-web-vitals"
}
And then .eslintrc.js with configuration for Eslint. Any thoughts how to repair it please? Nothing on Stack overflow did help.
The solution: The .eslintrc.json is hidden by default, since it starts with an dot. Due to this it is not visible on my desktop neither finder, but you have to delete and find it through command line.
Related
I have a react monorepo project with a number of aliases (typescript paths) setup which makes importing files easier without the need to use relative paths everywhere.
For example if I have a component in src/components/Sidebar/Toggle.jsx and I want to import that anywhere in the application I can just do import {Toggle} from '#company/components/Sidebar/Toggle' and there’s no need to do any relative path importing like ../../../Toggle.
Company is just an example alias to the src directory setup in tsconfig.json like:
"paths": {
"#company/*": ["./src/*"]
},
This works fine in vscode but in neovim (I’m using nvim-lspconfig with eslint) all exported functions which are imported using the alias have a warning
Exported declaration not used within other modules
even though they are.
If I import them using relative paths it works without warning.
Does anyone have a suggestion as what config I need to change so that neovim can see that these functions are in fact used in other files?
I've tried adding config in .eslintrc.json like this as suggested by https://www.npmjs.com/package/eslint-import-resolver-typescript but this did not solve it.
settings: {
'import/resolver': {
typescript: {
project: ['packages/*/tsconfig.json'],
},
},
}
I should also note that running eslint directly on the file with my current configuration works fine with no errors so this is somehow related to the neovim plugin.
With a bit more debugging I can see that the eslint plugin doesn't seem to be using the correct configuration file as it's root. There is an .eslintrc.js file in a sub folder but the main .eslintrc.js file lives higher up in the directory tree. The plugin seems to find the first .eslintrc.js and use that as the root file.
This seems to have turned out to be related to the eslint plugin in nvim-lsp. More here https://github.com/neovim/nvim-lspconfig/issues/2400
I'm using web-ext to sign an addon but I'm always having the same error message:
A content script defined in the manifest could not be found.
Error: Content script defined in the manifest could not be found at "node_modules/jquery/dist/jquery.min.js".
I already tried to change the path in the manifest.json file with ./, like:
"content_scripts": [
{
"matches": ["*://*/*"],
"js": [
"./node_modules/jquery/dist/jquery.min.js"
]
}
]
But the message keeps appearing, and it ignores the ./ since the message keeps complaining about could not be found at "node_modules/....
Not sure if there is a way to clear the web-ext cache. Or what I'm doing wrong to include such scripts. It seems the problem is with node_modules scripts.
Thanks in advance.
I use TypeScript in my create-react-app project and use local private packages.
The packages are meant to be shared between multiple apps and have their own repositories.
I would like to have my local packages in src/packages folder.
Here is my current folder structure:
--create-react-app (root)
--node_modules
--package.json
--src
--App.tsx
--index.tsx
--packages
--my-package (sub-repository)
--ModuleA.ts
--node_modules
--package.json
my-package is installed as local like this:
// package.json
"dependencies": {
"my-package": "file:src/packages/my-package"
}
This way I can import modules from my-package like this:
// src/App.tsx
import ModuleA from 'my-package/ModuleA'
However there is a compilation error when ModuleA imports a package from its own node_modules:
// src/packages/my-package/package.json
"dependencies": {
"moment": "^2.27.0"
}
// src/packages/my-package/ModuleA.ts
import moment from 'moment'
Compilation error:
> npm run start
Failed to compile.
./src/packages/my-package/node_modules/moment/moment.js
Line 9:37: 'define' is not defined no-undef
Line 9:50: 'define' is not defined no-undef
Search for the keywords to learn more about each error.
I think the error is caused by ESLint because it checks node_modules of my-package.
I do not want to npm run eject. I do not want to publish my packages either privately or publicly. I want to be able to change source code of my-package and see the changes in realtime when my app is running.
Is there a way to make it work like this please?
Thank you for your help.
I just found this here in 2022 because I wanted to do the exact same thing. I tried it and it is working fine now using create-react-app (react-scripts#4.0.4). ESLint doesn't complain about the files in node_modules folders nested in src.
Try absolute imports. It's, in general, a good habit to use absolute imports to solve nested imports hell.
In tsconfig.json file in the root of your project add the following code:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
reference:
https://create-react-app.dev/docs/importing-a-component/
After more googling I found this issue:
https://github.com/facebook/create-react-app/issues/4246
Looks like this approach is uncommon and not supported. I solved my problem by moving dependencies from nested node_modules to root package.json.
I'm developing an application using React and eslint. My problem is that inside my projects src folder there is an 'api-client' folder. Inside this folder are auto generated files used for managing connection to back-end. My problem is that every time I run or make changes to the app I see lots of errors inside the console regarding no-unused-vars and similar. Is there a way to ignore this folder completely? I can't move it outside of the src folder. I'm ignoring this folder in .eslintignore file with the line /src/api-client/*. Any help is really appreciated!
You can specifically tell ESLint to ignore specific files type
Ignore the folder /src/folder-name
Ignore the folder and everything inside it /src/folder-name/**
Ignore the folder and everything inside it of special file type /src/folder-name/**/*.js
I could not find a specific solution but this worked for me.
I needed to disable some react-app rules in a specific folder. So I added this in my packages.json and it ignores the folder. Not sure if there was a way to disable all rules maybe "*" but not sure.
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"src/modules/template/*"
],
"rules": {
"no-unused-vars": "off"
}
}
]
},
I've got a sort of weird problem, that I don't see any mention of elsewhere.
Create React App by default seems to log lint warning in the terminal when running yarn start and also in the Chrome console. All good. Makes sense, and I've seen discussions of whether this functionality should exist, and how it should work.
My issue is that those warnings seem not to match my .eslintrc settings at all!
As in, if I run yarn lint, which runs eslint using my settings, I see none of the warnings that show up in the console and terminal when I start my app.
For example, I have this rule turned off in my .eslintrc file:
"radix": 0,
And, consequently, there's no radix warning when I run yarn lint.
(Just in response to the answer below. I've tried a variety of options for this particular rule, including "as-needed". But I wanted to turn the rule off entirely, which I've evidently accomplished, because running yarn lint shows no errors related to radix at all).
But when I start the app, I see this in yellow warning boxes in the console:
Anybody know why my .eslintrc file is being ignored here, and how to get these warnings to represent the rules I've set?
According to the docs, you should pass either "always" or "as-needed". The latter should disable those warnings.
...
"radix": "as-needed",
...
EDIT: According to this source, you will have to eject your create-react-app to edit the ESLint settings.
It is possible to add EXTEND_ESLINT flag to the .env file.
When set to true, ESLint configs that extend eslint-config-react-app will be used by eslint-loader. Any rules that are set to "error" will stop the application from building.
Source: https://create-react-app.dev/docs/advanced-configuration
Your eslint config may be named .eslintrc.json and put in the root folder of your project.
Its contents should look like the following (note the extends field):
{
"extends": "react-app", //this extends statement is required
"rules": {
"radix": "as-needed"
}
}
And the .env file placed in the root should have the following line:
EXTEND_ESLINT=true