We Keep Coding

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.

ES6 import/export not working with babel-jest

I have installed both babel and babel-jest for use within my project. I have configured my babel.config.js file as so:
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
However I get the following error when trying to run my tests
import * as formObj from '../../../../public/Forms/Classes/Form.class.js';
^
SyntaxError: Unexpected token *
My package.json looks like this for babel, node, and babel-jest
"devDependencies": {
"#babel/preset-env": "^7.9.6",
"babel-jest": "^26.0.1",
"jest": "^24.9.0"
},
"engines": {
"node": ">=11.0.0"
}
Looking online- it seems like a lot of people who have issues with import/export in jest have issues due to their babel.config.js (or lack thereof). However- I made mine exactly how it is like in the jest docs. The error itself seems to step from a babel issue- but I'm failing to see where it could be.
I have tried various other things such as having a translation property in my jest config file, or trying different formats of importing my file, but nothing seems to work correctly.
Any advice greatly appreciated for solving this error.

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.

Run global ESLint with plugin eslint-plugin-jsx-a11y

I'm trying to run a global installation of ESLint against a single file, using a specified path to the configuration file:
eslint FileToCheck.jsx --config "../path/to/config/.eslintrc.js"
but I'm getting the error
ESLint couldn't find the plugin "eslint-plugin-jsx-a11y". This can happen for a couple different reasons:
If ESLint is installed globally, then make sure eslint-plugin-jsx-a11y is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.
If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm i eslint-plugin-jsx-a11y#latest --save-dev
So it seems like #1 is applicable and I need to install eslint-plugin-jsx-a11y globally. I try to do this with
yarn global add eslint-plugin-jsx-a11y
and rerun the original ESLint command, but it fails with the same error. I noticed during the yarn global add that some of the output said
"eslint-plugin-jsx-a11y#6.0.2" has no binaries
Indeed, when I check ~/AppData/Local/Yarn/bin I do not find any binaries for that plugin (though I do for ESLint).
How can I make ESLint run globally with this plugin? A good answer will not tell me just to install it locally, but will actually answer the question given - how this can be accomplished with globally installed ESLint and plugins.
Packages I have installed globally with yarn:
eslint
babel-core
babel-eslint
eslint-plugin-import
eslint-plugin-react
eslint-plugin-jsx-a11y
eslint-config-airbnb
Here is my .eslintrc.js, which may or may not be relevant:
module.exports = {
'extends': 'airbnb',
'plugins': [
'react',
'jsx-a11y',
'import'
],
'env': {
'browser': true
},
'parser': 'babel-eslint',
'rules': {
'prefer-template': 'error',
'comma-dangle': ['error', 'always-multiline'],
'import/no-extraneous-dependencies': 'off',
'react/prop-types': 'off',
'react/jsx-no-bind': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
'jsx-a11y/no-noninteractive-element-interactions': 'off',
'jsx-a11y/alt-text': 'off',
'jsx-a11y/no-autofocus': 'off',
'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
'no-use-before-define': ['error', { 'functions': false }],
'func-style': ['error', 'declaration', { 'allowArrowFunctions': true }],
'no-console': 'off',
'no-alert': 'off',
'no-continue': 'off',
'no-param-reassign': ['error', { 'props': false }],
'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }],
'one-var-declaration-per-line': ['error', 'initializations'],
'one-var': 'off', // Not needed because of one-var-declaration-per-line
'indent': ['error', 2, {
'FunctionDeclaration': { 'parameters': 'first' },
'SwitchCase': 1
}],
'no-restricted-syntax': [
'error',
{
selector: 'ForInStatement',
message: 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
},
{
selector: 'LabeledStatement',
message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
},
{
selector: 'WithStatement',
message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
},
],
}
};
if (process.env.FEATURE_FLAGS) {
const flags = Object.keys(JSON.parse(process.env.FEATURE_FLAGS));
module.exports.globals = flags.reduce(function (flagConfig, flag) {
flagConfig[flag] = false;
return flagConfig;
}, {});
}

This issue is caused by the changes to the way ESLint loads packages between versions 5 and 6. See here for details.
Plugins and shareable configs are no longer affected by ESLint’s location
Previously, ESLint loaded plugins relative to the location of the ESLint package itself. As a result, we suggested that users with global ESLint installations should also install plugins globally, and users with local ESLint installations should install plugins locally. However, due to a design bug, this strategy caused ESLint to randomly fail to load plugins and shareable configs under certain circumstances, particularly when using package management tools like lerna and Yarn Plug n’ Play.
As a rule of thumb: With ESLint v6, plugins should always be installed locally, even if ESLint was installed globally. More precisely, ESLint v6 resolves plugins relative to the end user’s project by default, and always resolves shareable configs and parsers relative to the location of the config file that imports them.
To address: If you use a global installation of ESLint (e.g. installed with npm install eslint --global) along with plugins, you should install those plugins locally in the projects where you run ESLint. If your config file extends shareable configs and/or parsers, you should ensure that those packages are installed as dependencies of the project containing the config file.
If you use a config file located outside of a local project (with the --config flag), consider installing the plugins as dependencies of that config file, and setting the --resolve-plugins-relative-to flag to the location of the config file.
There's a fair bit of discussion around this, but the current state of affairs (late 2019) seems to be that there are no good solutions at this point other that rolling back to eslint#5.x :( Watch this issue for more details.