Issue with lodash-es during compilation: 'Exclude' name not found

I'm encountering a similar issue to the one described in this post (following lodash error on build 'Cannot find name 'Exclude'')

ERROR in ... /node_modules/@types/lodash/common/object.d.ts (1689,12): Cannot find name 'Exclude'.
ERROR in ... /node_modules/@types/lodash/common/object.d.ts (1766,12): Cannot find name 'Exclude'.
ERROR in ... /node_modules/@types/lodash/common/object.d.ts (1842,34): Cannot find name 'Exclude'.

However, I'm using the lodash-es packages instead of the full lodash packages and the solutions provided aren't working for me.

The relevant dependencies listed in my package.json file are:

"@types/lodash-es": "4.17.0", "lodash-es": "4.17.4", "typescript": "~2.3.2"

It seems like @types/lodash-es was last updated on Mar 04 (check https://www.npmjs.com/package/@types/lodash-es), but I'm not using this latest version, sticking to 4.17.0 specifically.

The suggested solutions point to using a version prior to breaking changes, but my attempts have been unsuccessful.

How can this issue be resolved? The production build is failing because of this...

Update: In examining the project's package-lock.json file, I found this:

"@types/lodash": {
  "version": "4.14.123",
  "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.123.tgz"
},
"@types/lodash-es": {
  "version": "4.17.0",
  "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.0.tgz",
  "requires": {
    "@types/lodash": "*"
  }
},

It appears that when @types/lodash-es requires @types/lodash: *, it brings in the latest version of @types/lodash (4.14.123 - including the breaking change).

How can I ensure a different version of @types/lodash is included when I don't have control over the package-lock.json entries made by my dependency "@types/lodash-es": "4.17.0"?

angulartypescriptlodash

Answer №1

It appears that the recent update to @types/lodash is causing this issue, as you mentioned.

To resolve this issue, I made sure to specify the appropriate version of @types/lodash in my package.json file.

Following advice from responses to the related problem mentioned in the initial post, it was recommended to add "@types/lodash": "4.14.121" to the package.json file for a solution.

Answer №2

If you're working with an outdated version of Typescript, consider installing type definitions tailored for that specific version. For instance, if using Typescript 2.5, you can run the command: 

npm install --save-dev @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd82818090538399c9ddecaa87">[email protected]</a>

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

Body element in Angular component seems to be mysteriously added at the bottom

<pI'm experiencing something unusual. Every time I render my custom element, the content of the body (innerHTML) of the element is getting appended at the end.</p> <pHere's an example on my homepage - notice how 'childbody' ...

angularangular-elements

Avoid generating `.d.ts` definition files during the onstorybook build process in a Vite React library project

I am currently developing a component library using react and typescript. I have integrated Vite into my workflow, and every time I build Storybook, the dts plugin is triggered. This has two undesired effects: It generates numerous unnecessary folders an ...

javascriptreactjstypescriptvitepackage.json

Accessing HTTP data through a function instead of using ngOnInit in Angular is a more efficient approach

Trying to retrieve data from a service using setInterval has posed an issue for me. When I call the service from ngOnInit, everything functions as expected. However, when attempting to call it from any other function, an error occurs: "ERROR TypeError: Ca ...

angulartypescriptapi

How do AppComponent and @Component relate to each other in AngularJs 2?

Recently, I came across the file app.component.ts in Example and found some interesting code. The link to the example is: here. Here's a snippet of the code: import { Component } from '@angular/core'; export class Hero { id: number; na ...

typescriptangular

Bring in the SCSS using a relative path with Angular CLI

When trying to import a *.css file into a .scss using the @import rule, I encountered some issues. The .css file contains relative path references like url('path') and is part of an imported library located in the node_modules directory. My .com ...

cssangularsassangular-cli

Create a unit test scenario to test a function that returns a promise in the shape of an array utilizing Jasmine and Karma

I am just starting to learn about unit test cases and I have a method called 'loadEsriModules' that is being called from the ngOnInIt() function. Here is a sample of the code: ngOnInit() { debugger this.loadEsriModules().then(() => { ...

angularunit-testingmockingjasminekarma-jasmine

The failure to import a node module in next.js with typescript

I'm currently working on integrating a package called bcrypt into my project. I have successfully installed it using npm install bcrypt. Although the package is visible in the node_modules folder, I am encountering an error when trying to import it i ...

typescriptnext.jsnpm-installtypescript-module-resolution

What is the method to determine the size of an array of objects where each object contains its own internal array?

Here is the data that I have: var a=[ { name: "time", Details:[ {value:"month",checked:true,id:1} ] }, { name: "product", Details:[ {value: ...

javascriptangulartypescript

Using optional function arguments with destructured arguments in TypeScript can result in throwing an error

interface Type1 { attr1: string; attr2: string; } interface Type2 { attr1: string; attr2: string; attr3: string; // additional attribute } function fn(config: Type1 | Type2): void { // The error code is displayed above. I am ...

typescript

What is the method for extracting an Ionic image URL from an image that has been uploaded to Firebase?

I'm currently working on uploading an image from a phone in Ionic using Cordova: async takePhoto(sourceType: number) { try { const options: CameraOptions = { quality: 50, targetHeight: 100, targetWidth ...

angularfirebaseionic-frameworkfirebase-realtime-databaseionic2

The convention for naming the StoreModule.forRoot in ngrx

So in my Angular Application's app.module.ts file, I have the following setup: StoreModule.forRoot({ applicationState: applicationReducer, }), In my app.reducer.ts file, I have defined the initial state and a movies reducer like this: export const ...

angularngrxstore

Leverage a unified custom theme across both iOS and Android platforms in Ionic 3

My Ionic application displays distinct widgets for the iOS and Android platforms. What is the most effective method to maintain customized buttons, input boxes, etc., that are consistent across both platforms? How can I create a unified theme for all plat ...

angularionic-frameworkionic2ionic3

Utilizing Elvis Presley in Angular for two-way data binding with mat-form-field and [(ngModel)]

How can I make sure that if the object or id is null, nothing is displayed so that users can update it later? <mat-form-field appearance="legacy"> <mat-label>LOCATION</mat-label> <mat-select name="obj" [(ngMo ...

angularangular-materialngmodelmat-form-field

Exploring the process of authentication and authorization at individual route levels within Angular 4 using Keycloak

We have successfully integrated Keycloak with our application and the login and logout flow is functioning properly. However, we are facing an issue with authentication and authorization at the route level. When a user clears their browser session or the s ...

angularsessionauthenticationauthorizationkeycloak

A guide to efficiently utilizing conditional dynamic import within a React application

Currently, I am working on a component that receives an array of strings as props. The goal is to iterate over each string in the array, capitalize it, and then dynamically import JSX elements from the "react-icons/si" module. While I have successfully acc ...

reactjstypescriptimport

Can someone assist me in creating mongoose models?

Currently, I am focused on managing products and categories These are the two types I have created: type Category = { parent: Category | null; // Is this acceptable? name: String; }; type Product = { categories: Category[]; name: String; ...

typescriptmongodbexpressmongooseschema

Deploy to GitHub pages: set default homepage instead of the application

I'm facing an issue while trying to deploy my Angular application on gh-pages with the angular-cli. Despite working perfectly on my local machine, all I see is the default angular-cli generated page. Any suggestions on how to fix this? Thank you. ...

angularangular-cligithub-pages

Retrieving a collection of property values from an array of objects in TypeScript

class DataModel{ constructor(private Name: string, private Id: number, private isAlive: boolean){} array1?: string[]; } Picture this scenario: the array has been filled with information retrieved from an API call. Now, I have an array of DataMode ...

arraystypescript

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...

htmlangularbootstrap-4

Discover the dynamic method for determining the value of a nested array based on a specific condition

Currently, I am delving into the world of nested arrays and attempting to locate a specific value within the array based on a condition. The data returned by the API is structured in the following format: data= { "ch_Id": "1234", "title": "Title" ...

javascriptarraysangulartypescript