Error: Expected an expression but found a parsing error in the eslint code

interface Address {
  street: string,
}

export const getAddress = (address: Address | null) : string =>
  address?.street ? `${address?.street}`
    : '0000 Default Dr';

Why am I receiving the error message

Parsing error: Expression expected. eslint
on address in address?.street ?? Any ideas?

Eslint rules are applied to both .js and .ts files:

 {
      "extends": [
        "plugin:cypress/recommended",
        "plugin:@typescript-eslint/recommended"
      ],
      "overrides":
        {
          "files": ["**/*.{ts,tsx}"],
          "parser": "@typescript-eslint/parser",
          "parserOptions": {
            "project": "./tsconfig.json"
          },
          "plugins": ["@typescript-eslint", "prettier", "react-hooks", "jsx-a11y"],
          "extends": [
            "eslint:recommended",
            "react-app",
            "plugin:@typescript-eslint/recommended",
            "plugin:@typescript-eslint/recommended-requiring-type-checking",
            "prettier"
          ],
          "rules": {
            "@typescript-eslint/explicit-function-return-type": "off",
            "@typescript-eslint/no-explicit-any": "off",
            "@typescript-eslint/no-shadow": "off",
            "no-empty-function": 0,
            "@typescript-eslint/no-empty-function": "off",
            "@typescript-eslint/explicit-module-boundary-types": "off",
            "@typescript-eslint/no-non-null-assertion": "off",
            "no-use-before-define": "off",
            "@typescript-eslint/no-use-before-define": ["error"]
          },
          "settings": {
            "import/parsers": {
              "@typescript-eslint/parser": [".ts", ".tsx"]
            },
            "import/resolver": {
              "typescript": {}
            },
            "react": {
              "version": "detect"
            }
          }
        }
      ]
    }

Answer №1

It seems that the ES version is currently at its default setting. The use of optional chaining (address?.street) was introduced in ES2019. By default, ESLint recognizes ECMAScript 5 syntax. To enable ES2019 syntax, simply add the following line to your eslintrc under parserOptions: ecmaVersion: '9' (or '2019') (refer to the documentation).

Answer №2

There are various reasons that can lead to encountering this issue -> link to the informative article

In this scenario, separating the declaration of const and variable export into distinct lines would resolve the problem.

In addition to the insights provided in the aforementioned resource and pertaining to my unique situation, I faced this error when I concatenated statements without utilizing parentheses and included a comment inline at the end.

The original statement triggering the error appeared as follows:

if (selectedHour < startHour - 1) for (let i = 0; i <= 60; i++) elapsedMinutes.push(i); // disable all minutes

To address this, it was necessary to eliminate the comment from the end and relocate it onto its own line:

// disable all minutes
if (selectedHour < startHour - 1) for (let i = 0; i <= 60; i++) elapsedMinutes.push(i);

I trust this solution proves beneficial! Enjoy your coding endeavors!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

I am working with an AngularJS component written in TypeScript called news.component.ts. This component makes a call to a service named google.service.ts in order to fetch news RSS using a service that converts XML to JSON. Within the NewsComponent, I hav ...

"Design a function that generates a return type based on the input array

Created a function similar to this one // window.location.search = "?id1=123&id2=ABC&id3=456" const { id1, id2, id3 } = readArgsFromURL("id1", {name: "id2", required: false}, {name: "id3", required: true}) ...

Utilizing the [mat-dialog-close] directive within an Angular dialog component

While attempting to utilize the suggested code in the dialog template for opening a dialog component to either confirm or cancel an action, I encountered an error with the following message. Why did this happen? Property mat-dialog-close is not provided by ...

Tips for saving the generated POST request ID for future use in another function

I am facing a challenge where I want to use the ID of a newly created Order as the OrderId for an OrderLine that needs to be created immediately after. After creating the Order, if I log the orderId INSIDE THE SUBSCRIBE METHOD, it shows the correct value. ...

A Project built with React and TypeScript that includes code written in JavaScript file

Is it an issue when building a React project with Typescript that includes only a few JS components when moving to production? ...

What is the best way to incorporate node modules into my tsconfig file?

I've taken some raw angular typescript components and packaged them into a private NPM module for sharing between various projects. Although I import these components like any other npm library, I encounter an error message when trying to serve my ap ...

Tips for utilizing the patchValue method within a dynamic FormArray in Angular

When working with the first case (check out the DEMO link), patchValue() function can easily manipulate the select drop-down menu in a reactive FormGroup(), where only FormControl() is used. However, in the second case, I need to achieve the same functiona ...

Uncovering the Full Scope of a LinkedIn Profile with Typescript

Hello, I am currently in the process of developing an Ionic2 framework app that includes social login functionality. Up to this point, I have successfully integrated Google Plus and Facebook buttons. Now, I would like to add LinkedIn login as well. The c ...

Organize information in a React table following a predetermined sequence, not based on alphabetical order

As a beginner with React, I'm looking to sort my data by the column "Status" in a specific order (B, A, C) and vice versa, not alphabetically. The data structure looks like this: export interface Delivery { id: number; name: string; amount: num ...

Tips on Identifying the Category

I am currently studying TypeScript. Recently, I have been using Axios to fetch API data, and then I stored the returned value in a useEffect hook. However, when trying to display it on the screen, I encountered an error stating that there is no 'name ...

Typescript: When using ts-node-dev, an error occurred while trying to import express due to an unexpected

I am embarking on a fresh project using Typescript and I intend to set up the node server with typescript utilizing express. There's a helpful tutorial that explains how to execute a Typescript file without going through the hassle of compiling files, ...

Compiling TypeScript files with an incorrect path when importing, appending "index" at the end of the @angular/material library

I'm currently working on creating a library to collect and distribute a series of Angular components across various projects, with a dependency on angular/material2. My objective is to eventually publish it on npm. However, I've encountered an i ...

Styling of Bootstrap HTML element not appearing as expected

Recently, I've been trying out a new approach by embedding Bootstrap components in an iframe. However, despite loading the necessary stylesheet and scripts, the elements seem to be missing their styles. Can anyone shed some light on why this might be ...

What could be the reason for receiving the error message "NgModule' is not found" even after executing the command "npm i @types/node --global"?

Even though I tried following the suggestions provided in this Stack Overflow thread, I am still encountering the error "TypeScript error in Angular2 code: Cannot find name 'module'". My development environment consists of Angular 5 and npm versi ...

Issue: Angular 7 unable to route directly to URL with specific ID

When I click on the navigation link with code for button click, it works perfectly fine: this.router.navigate(['/dashboard', this.selectedDateString]); However, if I manually type the URL into the address bar like this: I receive a forbidden! ...

Creating cohesive stories in Storybook with multiple components

I need assistance with my storybook setup. I have four different icon components and I want to create a single story for all of them instead of individual stories. In my AllIcons.stories.tsx file, I currently have the following: The issue I am facing is ...

Resolving ES6 type conflicts while compiling TypeScript to Node.js

I seem to be facing some challenges with the TypeScript 2 type system when working with Node.js. Let me explain the situation: I am compiling a small Node.js Express server written in TypeScript to plain ES5 for running under Node 6.10.0 (target: ES5 in ...

The attribute 'pixiOverlay' is not found in the property

Working on my Angular 8 project, I needed to display several markers on a map, so I chose to utilize Leaflet. Since there were potentially thousands of markers involved, I opted for Leaflet.PixiOverlay to ensure smooth performance. After installing and imp ...

Create a new data structure in TypeScript that stores multiple values in a

For my TypeScript project, I came across a situation where I needed to utilize Promise.all(...) to handle an array of multiple items: Promise.all( firstRequest, secondRequest, ..., nthRequest ) .then((array : [FirstType, SecondType, ..., NthType]) ...

Creating custom observables by utilizing ViewChildren event and void functions in Angular 12: A step-by-step guide

I am currently working on developing a typeahead feature that triggers a service call on keyup event as the user types in an input field. The challenge I face is that my input field is enclosed within an *ngIf block, which requires me to utilize ViewChildr ...