Specify node version for eslint - javascript

I'm using eslint for a Node.js application. I'm running node version v10.6.0, but when I run eslint in the root directory of my project, I get error messages like the following:
The 'URL' is not supported until Node.js 10.0.0. The configured version range is '>=6.0.0'
My .eslintrc.json looks like this:
{
"extends": [
"eslint:recommended",
"plugin:node/recommended",
],
"parserOptions": {
"sourceType": "module"
}
}
and my package.json contains:
"engine": {
"node": ">=10.6.0"
}
How can I tell eslint that I'm using a newer node version? I'm using eslint v5.2.0.

The engine property in the package.json file is incorrect and should be engines instead. This is the property that eslint uses to determine the node version.

Related

Cannot serve React app in NX-jsx is not currently enabled

I created a react app in a NX workspace using nx g #nrwl/react:application --js --unitTestRunner=none --e2eTestRunner=none my-project
Then I developed my project. Finally when I want to run my project using
nx serve my-project I get following error:
Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled
I realized that it is related to babel configuration of project so I
installed #babel/preset-react #babel/preset-env and replaced content of
.babelrc file
configuration before any change:
{
"presets": [
[
"#nrwl/react/babel",
{
"runtime": "automatic",
"importSource": "#emotion/react"
}
]
],
"plugins": ["#emotion/babel-plugin"]
}
.babelrc after installing packages
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I also changed jsx property in compilerOptions of tsconfig.json from
"react-jsx" to "react"
but when I run nx serve my-project again, I get that error again.
What should I do? Is there any solution?
The issue is the lib generator, when you create a react lib ,I only tried publishable, it doesnt add the babelrc file so you have to add it yourself..just copy it from your app. Its a bug atm

Why is ESLint complaining about a syntax error when I can run my code fine in Node? "Parsing error: Unexpected token =" [duplicate]

ESLint is throwing a Parsing error: Unexpected token = error when I try to lint my Es6 classes. What configuration parameter am I missing to enable fat arrow class methods in eslint?
Sample class:
class App extends React.Component{
...
handleClick = (evt) => {
...
}
}
.eslint
{
"ecmaFeatures": {
"jsx": true,
"modules":true,
"arrowFunctions":true,
"classes":true,
"spread":true,
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"strict": 0,
"no-underscore-dangle": 0,
"quotes": [
2,
"single"
],
}
}
If you want to use experimental features (such as arrows as class methods) you need to use babel-eslint as a parser. Default parser (Espree) doesn't support experimental features.
First install babel-eslint:
npm i -D babel-eslint
Then add the following to your .eslintrc.json file:
"parser": "babel-eslint"
First install these plugins:
npm i -D babel-eslint eslint-plugin-babel
Then add these settings to your ESLint config file:
{
"plugins": [ "babel" ],
"parser": "babel-eslint",
"rules": {
"no-invalid-this": 0,
"babel/no-invalid-this": 1,
}
}
This way you can use fat arrow class methods plus you will not get any no-invalid-this errors from ESLint.
From what I read in the error message Parsing error: Unexpected token = it looks like more a parser error than linter one.
Assuming you are using Babel as your JavaScript compiler/transpiler and babel-eslint as your ESLint parser, chances are that it is Babel complaining about the syntax, not ESLint.
The issue is not about the arrow functions but something more experimental (ES7??) that I think it is called property initializer or class instance field (or both :) ).
If you want to use this new syntax/feature you need to enable preset-stage-1 in Babel. This preset includes the syntax-class-properties plugin that allows that syntax.
Summing up:
Install babel preset:
npm install babel-preset-stage-1
Add this preset to the list of your presets (I suppose you are already using es2015 and react presets), either in your .babelrc or in your babel-loader query field if you are using webpack.
"presets": ["es2015", "stage-1", "react"]
I came across the same problem today
and #dreyescat 's answer works for me.
By default, babel uses 3 presets: es2015, react, stage-2
Screenshot with "Parsing error: Unexpected token ="
Then if you also select the stage-1preset, the error is gone
Screenshot with no error
You can test it on the bebeljs.io site yourself
2021 Update: Be sure you're using #babel/eslint-parser and not the deprecated babel-eslint
Remove the old package if necessary: yarn remove babel-eslint or npm uninstall babel-eslint
yarn add --dev #babel/eslint-parser or npm install --save-dev #babel/eslint-parser
In .eslintrc add "parser": "#babel/eslint-parser"
Optionally, this answer suggests including "requireConfigFile": false in .eslintrc to prevent eslint from searching for unnecessary config files:
{
...
"parserOptions": {
...
"requireConfigFile": false,
}
}
If this still doesn't work, try checking whether your system is using a globally installed eslint (and removing it).
My other problem was eslint was using a globally installed version instead of my local version, and the global eslint can't access my locally installed babel-eslint parser. Further, since my globally installed eslint was installed on a different version of node, removing it was non-trivial.
Checking if your system is using global versus local eslint.
Install babel-eslint following #spencer.sm's answer for your local eslint.
From the terminal, check if you get different output from running eslint . and npx eslint .. If you get different output it's likely that it's your global eslint running that can't access babel-eslint.
Uninstalling the global eslint
For most people, the following commands should uninstall eslint with npm (uninstall global package with npm) and yarn (uninstall global package with yarn):
# npm
npm uninstall -g eslint
npm uninstall eslint
# yarn
yarn global remove eslint
Next, run npx eslint . to see if things work. If it doesn't, which it didn't for me, you need to take an extra step to remove the globally installed eslint.
From this answer, I learned that I had installed eslint on a system version of Node instead of my current version of Node (I use nvm). Follow these simple steps to remove the global eslint and you should be good to go!
Your sample isn't valid ES6, so there's no way to configure eslint to allow it

karma-typescript confused by .d.ts typings into failing to bind to npm package code

I'm importing an npm package into my project with a package.json like this:
{
// ...
"browser": "dist/umd/index.js",
"main": "dist/cjs/index.js",
"module": "dist/fesm2015/index.mjs",
"esm2015": "dist/index.js",
"fesm2015": "dist/fesm2015/index.mjs",
"typings": "dist/index",
"sideEffects": false,
"exports": {
"node": {
"module": "./dist/fesm2015/index.mjs",
"require": "./dist/cjs/index.js"
},
"browser": {
"module": "./dist/fesm2015/index.mjs",
"default": "./dist/umd/index.js"
},
"default": "./dist/cjs/index.js"
},
// ...
}
(I really, really wanted to have "type": "module" in the above package, but that creates a whole other world of pain trying to make karma and other tools happy.)
I can build and run my project that uses the above npm package just fine, and I can run mocha unit tests outside of karma without any problem. However, when running under karma, I get errors like this:
20 06 2021 10:58:05.127:INFO [Chrome 91.0.4472.106 (Mac OS 10.15.7)]: Connected on socket 9qHeabxqGGw_tCrRAAAB with id 99567255
Chrome 91.0.4472.106 (Mac OS 10.15.7) #tubular/util should blend colors correctly FAILED
TypeError: math_1.round is not a function
at colorFromRGB (src/browser-graphics-util.js:2:2895)
at Object.blendColors (src/browser-graphics-util.js:2:1803)
at Context.<anonymous> (src/index.spec.js:60:45)
Chrome 91.0.4472.106 (Mac OS 10.15.7): Executed 30 of 30 (1 FAILED) (0.818 secs / 0.789 secs)
TOTAL: 1 FAILED, 29 SUCCESS
It seems that my project code isn't correctly binding to the code in the imported npm package, and all tests that depend on code from that package fail.
If I perform a little manual surgery on the contents of my node_modules directory, and modify the package.json of the imported npm package by removing "typings": "dist/index", karma is once again happy, and all my tests succeed.
Why, why for deity-of-your-choice's sake, does the existence of typings make any difference to karma-typescript about the success or failure of binding to the code in the npm package?
I definitely want that package (which is a package I created in another project) to provide TypeScript typings, so permanently getting rid of typings is NOT an option. How do I tell karma or karma-typescript to either ignore these typings, or simply not get so confused by them?
Here is my current karma.conf.js:
module.exports = function (config) {
config.set({
frameworks: ['chai', 'karma-typescript', 'mocha'],
files: [
'src/**/*.ts'
],
preprocessors: {
'src/**/*.ts': 'karma-typescript'
},
reporters: ['progress', 'karma-typescript'],
browsers: ['Chrome'],
karmaTypescriptConfig: {
tsconfig: './tsconfig.karma.json'
},
});
};
And tsconfig.karma.json, which simply exists to make karma build CommonJS modules instead of ESM modules:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"target": "ES2015"
},
"exclude": [
"dist",
"node_modules"
]
}
UPDATE:
Another bit of information on this problem. If I use an explicit import like this:
import { max, min, round } from '../node_modules/#tubular/math/dist/cjs';
...instead of:
import { max, min, round } from '#tubular/math';
...the problem goes away, which confirms that this is a module resolution problem.
So what is it about module resolution that's changed while running in karma with karma-typescript? Are there settings I can use to tweak module resolution?
I figured it out.
karma-typescript is dependent on browser-resolve, and my imported package.json had a "browser" entry, but meant for a somewhat different purpose, and clearly not at all compatible with how karma-typescript uses browser-resolve.
As long as I take out my "browser" field, the "typings" field can stay, and no longer causes my tests to fail.

couldn't find the plugin "eslint-plugin-promise"

I've done the followings to use eslint globally so not repeat on every new project but I am not able to get the eslint plugin part to work. what step am I missing:
installed eslint (& the eslint-plugin-promise ) globally
created a .eslintrc file in my home directory ,and included these in it
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"plugins": [
"promise"
]
}
and I expect that when I run eslint in any directory the plugin to be known.
so in my work directory I add a .eslintrc.json with all the rules I wanted to apply
but I get these errors:
1:1 error Definition for rule 'promise/always-return' was not found promise/always-return
1:1 error Definition for rule 'promise/catch-or-return' was not found promise/catch-or-return
1:1 error Definition for rule 'promise/no-nesting' was not found promise/no-nesting
Now if I add this to local .eslintrc
"plugins": [
"promise",
],
I get this error : ESLint couldn't find the plugin "eslint-plugin-promise".
and recommends me to install it locally. but that's exactly what I want to avoid.
Try to upgrade to the latest version of ESLint and make sure it's configured properly in .eslintrc.json

ESlint and typescript integration issues

I have the following problem I am trying to integrate typescript with ESlint, I have done it by installing eslint package with some additional packages basing mainly on a tutorial (
tutorial if it turns out to be helpful I can paste a link.Then after using eslint --init command I generated a file .eslintrc, where had all my configurations included. My goal is to have underline in my VScode Editor using Eslint. As a extra info when I use eslint --fix command it returns errors/warnings so its only underlining
I have typescript installed locally also tried globally, all necessary plugins also, deleting node_modules/checking versions of packages - don't have an idea what's wrong here. Would be very grateful for even some insights. I am using Mac pro with Mojave 10.14.6
Regards!
.eslintrc.json:
{
"env": {
"es6": true,
"node": true
},
"extends": [
"airbnb-base",
"plugin:#typescript-eslint/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"jsx": true
},
"plugins": [
"#typescript-eslint"
],
"rules": {}
}
Unfortunately when Eslint starts still gets this kind of error in terminal output tab:
[Error - 11:44:47 PM] Failed to load plugin '#typescript-eslint'
declared in 'project-name'/.eslintrc.json': Cannot find module
'typescript' Referenced from:
/Users/MyUser/Desktop/project-name/project-name-backend/.eslintrc.json
Have you tried installing the missing module alone? Try re-installing the packages giving the issues as they may have been corrupted. You could also run npm audit to repair corrupted files.

Categories