Develop Reference

eslint / typescript: Unable to resolve path to module

My .eslintrc.json is:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"prettier",
"import"
],
"extends": [
"airbnb",
"airbnb/hooks",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"prettier"
],
"root": true,
"rules": {
"no-const-assign": 1,
"no-extra-semi": 0,
"semi": 0,
"no-fallthrough": 0,
"no-empty": 0,
"no-mixed-spaces-and-tabs": 0,
"no-redeclare": 0,
"no-this-before-super": 1,
"no-unreachable": 1,
"no-use-before-define": 0,
"constructor-super": 1,
"curly": 0,
"eqeqeq": 0,
"func-names": 0,
"valid-typeof": 1,
"import/extensions": 0,
"react/jsx-filename-extension": 0,
// note you must disable the base rule as it can report incorrect errors
"no-shadow": 0,
"#typescript-eslint/no-shadow": [
1
],
"no-unused-vars": 0,
"#typescript-eslint/no-unused-vars": 1,
"no-undef": 0,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/no-static-element-interactions": 0,
"#typescript-eslint/explicit-module-boundary-types": 0,
"react/button-has-type": 0,
"react/require-default-props": 0,
"react/prop-types": 0,
"react-hooks/exhaustive-deps": 0,
"react/jsx-props-no-spreading": 0
},
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx",
".ts",
".tsx"
]
}
}
}
}
In a file src/components/elements/ProtectedRoutes/InviteRoute.tsx, I have:
import routeNames from 'constants/routeNames';
import useRoles from 'hooks/roles';
import { ROLE } from 'shared/src/types/enums';
The app runs fine, but when I run lint, I get errors:
2:24 error Unable to resolve path to module 'constants/routeNames' import/no-unresolved
3:22 error Unable to resolve path to module 'hooks/roles' import/no-unresolved
5:22 error Unable to resolve path to module 'shared/src/types/enums' import/no-unresolved
What am I doing wrong?

You should pass this config to eslint if you want to import your ts / tsx files without the extension.
The module directory is important here to resolve path inside ./src. If the module is not found inside src it will search inside node_modules
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx"],
"moduleDirectory": ["src", "node_modules"]
}
}
}

If you get this error in a monorepo in VSCode it is probably because ESLint is looking for the tsconfig file in the incorrect folder and you should add a .vscode/settings.json with some configuration.
For example if you have a project located at workspaces/server:
{
"eslint.workingDirectories": [
{ "directory": "workspaces/server", "changeProcessCWD": true },
]
}
to tell eslint about all the different sub-project folders

It looks like you have defined custom paths in your TypeScript config (usually tsconfig.json). The import plugin doesn't know about the correct location of the TypeScript config and hence cannot resolve those paths. What you need to do, is to specify the correct path to your TypeScript config via the project parameter in the resolver options:
{
...
"settings": {
"import/resolver": {
"project": "./my-path-to/tsconfig.json",
...
}
}
}
Or if your tsconfig.json is located in your respository's root, set: "project": {}, see this GitHub issue: https://github.com/import-js/eslint-plugin-import/issues/1485

In case this helps, I had similar issue but in a create-react-app project without typescript. What I had to do was add current directory to the moduleDirectory field, see below.
In my .eslintrc.json I added the following, please note I'm not using typescript files in my project:
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": [".", "node_modules"]
}
}
}

Prettier rule "no-multiple-empty-lines" not working in React.js project

I want to have an ability to use 2 blank lines in some parts of my code.
Prettier default behaviour allows to have 1 blank line maximum.
I've tried to use "no-multiple-empty-lines": [2, {"max": 2 }] but it doesn't work at all and prettier still complains.
This is my .eslintrc config file. If you need any other information please let me know.
{
"env": {
"node": true,
"browser": true,
"es6": true,
"commonjs": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
],
"rules": {
"prettier/prettier": "error",
"no-multiple-empty-lines": [2, {"max": 2 }],
"react/jsx-uses-vars": [2],
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
},
"plugins": [
"prettier",
"react"
],
"settings": {
"react": {
"version": "detect" // React version. "detect" automatically picks the version you have installed.
}
}
}

This might not work in your case -- I'm just running eslint without prettier -- but try this line instead:
"no-multiple-empty-lines": ["error", { "max": 2, "maxBOF": 0, "maxEOF": 0 }]
If you definitely want to run it through prettier with eslint though, it looks like that might not work at all. Not sure I'm reading this issue correctly, but it seems like that might not be configurable in prettier? If all you want is to change eslint's behavior though, I think the above line should work because I just had to use it in my own config.

Grunt - grunt-eslint does not start task

I've set up the grunt-eslint in my gruntfile.js, but when I run the "grunt eslint", nothing happends. The task looks like it would start but just stands still even after 15min.
All my other tasks works just fine, all except eslint wich shows no errors or anything.
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
eslint: {
options: {
configFile: '.eslintrc.json'
},
target: ['src/js/*.js']
},
})
grunt.loadNpmTasks('grunt-eslint');
grunt.registerTask('eslint', [
'eslint',
]);
}
.eslintrc.json
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
}
Both the gruntfile and .eslintrc.json is in root
Does anyone know what it is that can cause this? Is my setup wrong?

I had the same problem.
If you add --verbose option when running:
grunt eslint --verbose
You'll see that your task is running repeatedly - because you named your task eslint(which is the same name as already registered eslint task) grunt falls into infinite loop.
Change
grunt.registerTask('eslint', [
'eslint',
]);
to:
grunt.registerTask('myeslinttask', [
'eslint',
]);
and run:
grunt myeslinttask

the problem of:
grunt.registerTask('eslint', [
'eslint',
]);
is that it will call it self forever, just delete this registerTask command
and run grunt eslint , that will be enough to

How to implement flowtype in Nuxt.js

I am currently trying to convert our existing vue.js project into nuxt.js. I am unable to add flowtype support in nuxt.js. when i run the flow server it says no errors!! but running npm run dev, its throwing error on the flow syntax.
.flowconfig
[include]
pages/**/.*
components/**/.*
layouts/**/.*
apiRoutes/.*
store/.*
utils/.*
[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*
.*/.nuxt/.*
[libs]
./flow/
[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'
module.name_mapper='^#/\(.*\)$' -> '<PROJECT_ROOT>/\1'
i've added all the neccessary babel and eslint packages.
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-2",
["es2015", {"modules": false }],
"flow-vue"
],
"plugins": [
"transform-runtime",
"transform-class-properties",
"syntax-flow",
"transform-flow-strip-types"
],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
jquery: true
},
extends: [
'standard',
'plugin:flowtype/recommended'
// 'plugin:vue/recommended'
],
// required to lint *.vue files
plugins: [
'html',
'flowtype-errors',
'flowtype'
],
// add your custom rules here
rules: {
'flowtype-errors/show-errors': 2,
// allow paren-less arrow functions
'arrow-parens': 0,
'semi': ["error", "always"],
// allow async-await
'generator-star-spacing': 0
},
globals: {}
}
On running npm run dev, it doesnt parse flowtype syntax

I suggest following the instructions on the flow website to set up Babel. In particular there is a preset, so you shouldn't need to configure individual rules. Then you'll actually need to run Babel (again, instructions are on the website). Once you have run Babel, you should be able to run the code it outputs in Node.

ESLint - "Expected indentation of 0 tabs but found 4 spaces." when trying to override airbnb config

I'm trying to set up ESLint for my project via VSCode
I installed it and this is my .eslintrc file:
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"mocha": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"flowtype",
"flowtype-errors",
"import",
"promise",
"react"
],
"rules": {
"no-unused-vars": 0,
"indent": ["error", "tab"]
}
}
But when I look at some line like this:
export function increment() {
return {
type: INCREMENT_COUNTER
};
}
I get these errors:
[eslint] Expected indentation of 0 tabs but found 4 spaces. (indent)
[eslint] Expected indentation of 1 tab but found 4 spaces. (indent)
I think there is some conflict between the value I tried to override and between airbnb's configuration. I'm trying to set indentation to 1 tab instead of just 2 spaces
I used this boilerplate for my project:
https://github.com/chentsulin/electron-react-boilerplate
Any ideas?
Thanks