Failed to load plugin 'import' declared in '... » eslint-config-standard': Cannot find module 'eslint-plugin-import' - npm

I've been trying to use ESLint along with Standard and I haven't been able to get it to work. I've tried setting it up through eslint --init, uninstalling eslint globally and having all the packages locally, installing each package manually npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node, reinstalling ESLint extension and nothing so far. I'm perfectly able to run ./node_modules/.bin/eslint --fix ... in order to fix/check errors but it doesn't work with the VSCode extension by any meanings. I don't have prettier so it isn't related to it either.
Output:
[Info - 12:33:20 AM] ESLint server is running.
[Info - 12:33:23 AM] ESLint library loaded from: c:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\node_modules\eslint\lib\api.js
[Error - 12:33:25 AM]
Failed to load plugin 'import' declared in 'graphql-prisma\.eslintrc » eslint-config-standard': Cannot find module 'eslint-plugin-import'
Require stack:
- C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\__placeholder__.js
Happened while validating C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\src\resolvers\index.js
This can happen for a couple of reasons:
- The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
- If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
- If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.
.eslintrc:
{
"env": {
"es6": true,
"node": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
I've seen other questions in SO related to this issue but none of the solutions worked, unfortunately.

I had the same issue for many weeks and finally found this thread and comment on Github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372
My issue turned out to be related to subdirectories. As soon as I made the project the only open project with an .eslintrc.js file, all of my linting issues went away.
Hopefully this works for you.

To fix the dependency tree, try following these steps in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.

Also, be sure, that you have latest version of "eslint-plugin-import" plugin, as in my case, for example i had this error with "2.20.1" version, but latest "2.25.3" solved this issue

I had the same error caused by the eslint-plugin-import dependency and in my case, I got rid of the error by increasing to the latest version of the package.

For those having the following error with flutter firebase cloud functions after running firebase init functions and trying to run firebase deploy --only functions:
ESLint: 8.9.0
Error: Failed to load plugin 'import' declared in '.eslintrc.js': Cannot find module 'es-abstract/2021/RequireObjectCoercible'
Require stack:
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\ExportMap.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\rules\named.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\index.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\#eslint\eslintrc\dist\eslintrc.cjs
This was solved by:
delete node_modules in functions folder
delete package-lock.json in functions folder
cd .\functions\ in the terminal to get into functions folder, run npm i, cd ../
firebase deploy --only functions

I am having this issue too which was why I checked this post but did not see any answer that work for me. After searching online, I stumbled into this code which solves my problem.
npm i -D eslint #typescript-eslint/eslint-plugin

In my case, i was not using jest at all.
So i had to downgrade de eslint dev dependency:
"eslint": "^7.32.0",
as it say here: https://github.com/eslint/eslint/issues/15149#issuecomment-939501275

Related

eslint config for exp init project

I was compiling perfect way for adding eslint-flow-prettier in all types of react native projects.
I have some question about using eslint in Expo project.
Does exp init also install eslint?
If not, I have tried using following command for installing eslint
1)yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
2)yarn eslint --init
Is this the correct way to put eslint in expo project?
In the second step above it asked to Select 'Use a popular style guide', I selected Airbnb, after that it removed multiple packages and project is not running(obvious reason for error: missing libraries).So why this is happening?Should I have selected config other than Airbnb?(only 3 options for eslint config: Google, Airbnb, Standard)
Also I did use YARN for expo project because NPM was giving more complication, as it was removing 500+ packages during step1 above, which resulted in many of the libraries going missing from project, I tried npm install to install all packages but still had problems. So went with YARN.
For now I want to somehow include eslint in the Expo project.
Thanks in advance.
UPDATE 26th March 16:25 IST:
1)Here is the info after installing eslint using: npm install --save-dev eslint-config-airbnb babel-eslint (npm version 5.8.0)
install eslint-config-airbnb and babel-eslint as dev dependencies.
create a file in your root named .eslintrc and add this inside this file
{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
}
}
install Eslint extension in your editor. this is the extension for vscode(you can enable eslint if you are using Webstorm)
This problem got solved by deleting node_modules folder in project directory and did npm intsall.
So, during any npm install <package> if it removes some other previously installed packages, only way for now is to delete whole node_module folder and perform npm install. This worked for me, when this problem occurred while creating react-native app with native code support(https://facebook.github.io/react-native/docs/getting-started.html).

How to install ESlint globally?

I'm trying to install ESlint to use it with Sublime Text 2 for all my local projects. Configuration documentation is very unclear about global installation:
Note: eslint --init is intended for setting up and configuring ESLint on a per-project basis and will perform a local installation of ESLint and its plugins in the directory in which it is run. If you prefer using a global installation of ESLint, any plugins used in your configuration must also be installed globally.
I don't understand what they mean. I used eslint --init and it installed ESlint locally in node_modules, along with all plugins. There's nothing explained about installing plugins globally. How do I do that? Also, how do I use the global ESlint installation if eslint --init installs local one anyway? This is so confusing.
You can install Node modules within the project (locally) or globally. To switch to globally, you may use the -g flag, like so:
npm install -g eslint
Then see if it's working without Sublime Text (-v flag to see the version of eslint):
eslint -v
To see where it was installed (assuming MacOS/Linux):
which eslint
Then see if it's working in Sublime Text (you may need to restart Sublime first). If it's not working, make sure in the eslint package settings that the path is correct.
The assumption is that you have an eslint plugin installed for your editor,if you have then npm install -g eslint,then you can install add-ons for specific environments,like npm install eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import -g (this is support for pure JS and for React),you can on this way add support for nodejs too,in working folder make .eslintrc file which looks like this
{
"extends": ["airbnb" , "eslint:recommended"],
"env": {
"node": false,
"es6": true,
"browser": true
},
"rules": {
"semi":"error",
"no-unused-vars": "off",
"func-names":"off",
"indent":"off",
"no-else-return":"off",
"prefer-arrow-callback":"off",
"no-undef":"off",
"no-use-before-define":"off",
"comma-dangle":"off",
"eol-last":"off",
"no-trailing-spaces":"off",
"linebreak-style":"off",
"no-console":"off",
"no-restricted-globals":"off",
"object-shorthand":"off",
"no-shadow":"off",
"no-debugger":"off",
"prefer-const":"off",
"no-multiple-empty-lines":"off"
}
}
if you need node support then in env section of .eslintrc set node to 'true' and install eslint-node plugin globally too with next
npm i eslint-plugin-node -g.
Then in extends section of .eslintrc add "plugin:node/recommended".
In this way, you will have eslint support in every project on your machine which have .eslintrc file.Set rules which you need in .eslintrc rules section .
Thats it.
To install eslint globally: npm install -g eslint
To install eslint in your project folder: npm install eslint --save-dev
Add in package.json this script : "eslint": "eslint --ignore-path .gitignore ."
Create a file called .eslintrc and insert :
{
"env": {
"browser": true,
"node": true
},
"globals": {
"chrome": true
},
"rules": {
"no-console": 0,
"no-empty": [1, { "allowEmptyCatch": true }]
},
"extends": "eslint:recommended"
}
Personally, I save this file in my js folder
Go to node_modules/.bin
Run : eslint --init
or npm run eslint nameOfYourFile
Unfortunately, ESLint no longer recommends the use of Personal Configuration. Even if you have ESLint and other ESLint configuration files installed in the global scope, it will not read them correctly.
https://eslint.org/docs/latest/user-guide/configuring/configuration-files#personal-configuration-files-deprecated
Personal Configuration Files (deprecated)
⚠️ This feature has been deprecated. This feature will be removed
in the 8.0.0 release. If you want to continue to use personal
configuration files, please use the --config CLI
option.
For more information regarding this decision, please see RFC
28 and RFC
32.
~/ refers to the home directory of the current user on your
preferred operating
system. The personal
configuration file being referred to here is ~/.eslintrc.* file,
which is currently handled differently than other configuration files.
How does ESLint find personal configuration files?
If eslint could not find any configuration file in the project,
eslint loads ~/.eslintrc.* file.
If eslint could find configuration files in the project, eslint
ignores ~/.eslintrc.* file even if it's in an ancestor directory of
the project directory.
How do personal configuration files behave?
~/.eslintrc.* files behave similarly to regular configuration files,
with some exceptions:
~/.eslintrc.* files load shareable configs and custom parsers from
~/node_modules/ – similarly to require() – in the user's home
directory. Please note that it doesn't load global-installed packages.
~/.eslintrc.* files load plugins from $CWD/node_modules by default
in order to identify plugins uniquely. If you want to use plugins with
~/.eslintrc.* files, plugins must be installed locally per project.
Alternatively, you can use the --resolve-plugins-relative-to CLI
option
to change the location from which ESLint loads plugins.

Configure a Create-React-Native-App project to use MobX and use Babel to enable decorators

I've created a project with CRNA and after some considerations I've decided to go with MobX for state management. MobX works best with the decorator syntax (most MobX documentation is written using the decorator syntax) so I wanted to install the Babel plugin enabling the use of decorators.
I've successfully installed MobX (yarn add mobx mobx-react), but after installing the Babel plugin to enable decorators (npm install --save-dev babel-plugin-transform-decorators and adding "transform-decorators" to the plugins section in .babelrc, yarn start stopped working throwing an error about react-native-scripts not being found.
I've then run yarn installand this time it threw an error saying
Error starting packager: TypeError: Invalid Version: undefined
at new SemVer (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:279:11)
at Function.major (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:551:10)
at D:\xdl\src\project\Doctor.js:634:18
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4944:15
at baseForOwn (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:3001:24)
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4913:18
at Function.forEach (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:9359:14)
at D:\xdl\src\project\Doctor.js:624:9
at Generator.throw (<anonymous>)
at step (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\xdl\build\project\Doctor.js:615:191)
error Command failed with exit code 1.
Does anyone have experience with CRNA and MobX? Any help is much appreciated!
I've solved it. Turns out that running npm install --save-dev babel-plugin-transform-decorators broke something. What I should have been running is yarn add --dev babel-plugin-transform-decorators-legacy and add "transform-decorators-legacy" to .babelrc plugins section. After doing those steps I ran yarn install and it fixed my project.
Additionally, my editor (VSCode) threw warnings about extensions being experimental so I added a jsconfig.json file to the root folder and added the following inside:
{
"compilerOptions": {
"experimentalDecorators": true
},
"exclude": [".expo/*", "node_modules/*"]
}

ESLint code format in Vue

I created a project with npm and vuejs/vue-cli.
I imported the ESLint extension.
I have eslint entries in my package.json file.
Now when I format my code (right-click, Format Code), it completely disfigures my code.
What do I have to do to get vscode to format according to the ESLint rules?
But on the website, ESLint complains that everything is not formatted correctly, and so it is obviously installed and running in some sense:
1) First, you need to install the ESLint extension in the VS code.
This extension uses the ESLint library.If you haven't installed ESLint either locally or globally do so by running
npm install eslint //For a local install
or
npm install -g eslint //For a global install.
2) Then, open Setting.json file in VS code. by
File-> Preferences->Settings.
3) Add following setting.
{
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js",".vue"]
},
"eslint.validate": [
{ "language": "vue", "autoFix": true }
]
}
4) Now, check your vue file.It will start showing linting error.If not, restart the VS code.
I met this problem before.
I resolved it by installing eslint using npm install locally(it can be installed globally), then run "eslint --init", restart vscode.
Hope this help you.

Twilio React Native - Unable to resolve module crypto

I'm working on implementing the twilio package into my react-native project and when I require it in my file the project wont load and I'm seeing the following error:
Unable to resolve module crypto from /Users/[myname]/Documents/Projects/React-Native/[app-name]/node_modules/twilio/lib/webhooks.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/crypto and its parent directories
I've tried installing the crypto package directly and that doesn't seem to work either.
Has anyone experienced this issue, and has a way to resolve it?
You can use the rn-nodeify module to get crypto on react-native.
Add rn-nodeify to your devDependencies in package.json:
"devDependencies": {
"rn-nodeify": "^6.0.1"
}
Add the following to the scripts section of the same file:
"scripts": {
…
"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
Be aware that rn-nodeify will modify your package.json.
More information available here: https://www.npmjs.com/package/rn-nodeify
I suggest you have a look there, plenty of solutions are given because none seem to fix for everyone.
I suggest you try the following (taken from the issue from the link) :
rm -rf node_modules
rm -fr $TMPDIR/react-*
watchman watch-del-all
npm cache clean && npm install
npm start from ./node_modules/react-native
But check out the issue in its integrality, many found other fixes that worked for them.
It seems that React Native doesn't accept certain packages based on their dependencies, Twilio being one of these.
While not a direct solution, I created a work around to this issue by creating a separate Express server to make the Twilio call, and calling that route from within my React Native app.
React Native packager uses Babel under the hood. This means that you can use babel-plugin-rewrite-require Babel plugin to rewrite all require('crypto') calls to require('crypto-browserify'), assuming that the latter is installed in your node_modules.
As of January 2016, you can use .babelrc file to define optional configuration, so this becomes really easy. First, install the dependencies:
npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require
Then add plugins config to your .babelrc file:
{
"presets": ["react-native"],
"plugins": [
["babel-plugin-rewrite-require", {
aliases: {
crypto: 'crypto-browserify'
}
}]
]
}
Restart the packager and that should be it.
This is the same approach that ReactNativify uses, except that here we use .babelrc instead of defining custom transformer. When ReactNativify was written, it was not supported, so they had to go with more complex solution. See this file from ReactNativify for almost complete list of node polyfills.