Upon running `npm run build` in vue.js, an error occurs stating that the interface 'NodeRequire' cannot extend types 'Require' simultaneously

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11):
139:11 The 'NodeRequire' interface cannot extend both 'Require' and 'RequireFunction' at the same time.
  The named property 'cache' in types 'Require' and 'RequireFunction' are not identical.
    137 |
    138 | // For backwards compatibility
  > 139 | interface NodeRequire extends NodeJS.Require {}
        |           ^
    140 | interface RequireResolve extends NodeJS.RequireResolve {}
    141 | interface NodeModule extends NodeJS.Module {}
    142 |

 error  in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11):

Currently, I am using vue.js with typescript. If anyone has encountered this issue before or can provide some helpful advice on whether it's a configuration problem or related to a third-party package, please let me know. Thank you!

typescriptvue.jswebpack

Answer №1

I encountered the same issue.

The @types/node version causing the problem was 13.1.0, which was released on Mon, 23 Dec 2019 at 16:40:55 GMT.

In my situation, switching back to the previous version 12.12.22 resolved the issue.

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

Answer №2

In my opinion, it's more efficient to remove the @types definitions from the compilation process:

Implementing this is quite straightforward (update tsconfig.json):

{
  "compilerOptions": {
    ...,
    "types": []
  }
}

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

I'm encountering an issue where the same id is being passed to every function when I transfer it to the function parameter in a v-for cycle. What steps can I

When I pass the id parameter to the submitOrder function within a v-for loop, each function call with that parameter (id) ends up being the same every time. I'm puzzled as to why this is happening. <div v-for="order in orders"> <button ...

vue.js

The addition of types/cors in Express Typescript causes my POSTMAN request to hang indefinitely

I am experiencing an issue with my React web app and Express TypeScript backend. Previously, my POST request was functioning well, but now it seems to hang indefinitely on Postman without returning any errors. issueController.ts import { RequestHandler } ...

reactjsnode.jstypescriptexpresscors

`ASP.NET Core and VueJS integration for seamless file uploading`

I am struggling with my ASP.NET core and VueJS app. The issue at hand is uploading a file along with form data, but the problem arises as the form data ends up being null. The current setup involves using a combination of HTML and JS classes that utilize ...

jqueryvue.jsasp.net-corefile-uploadasp.net-ajax

Combining marker, circle, and polygon layers within an Angular 5 environment

I am working on a project where I have an array of places that are being displayed in both a table and a map. Each element in the table is represented by a marker, and either a circle or polygon. When an element is selected from the table, the marker icon ...

typescriptleafletngx-leaflet

Unable to access images stored locally in the Next 12 platform

Started a fresh project in Next js using the latest version, Next 12. Encountering a build failure every time I attempt to import and utilize an image file from the /public directory. ../public/images/header-logo.jpg TypeError: fetch failed at Object. ...

node.jswebpacknext.js

Retrieving the present precipitation amount from a Java Script API

I'm having some issues with extracting information from this list because I don't have much experience with JavaScript and APIs. The API I'm working with provides data for the current hour, but I'm struggling to retrieve that specific v ...

javascriptarraysapivue.jsnpm

Exploring the functionalities of command line arguments in Vue.js

Is there a way to set command line arguments for a Vue.js application? I am utilizing Vue 3 on the frontend which interacts with a Python backend (Flask) using Axios. Currently, I am defining the baseURL for Axios in my main.js file as follows: import axio ...

javascriptvue.jscommand-line-arguments

Retrieving chosen row data in Angular 6 Material Table

I am attempting to send the value of a selected row from one component to another upon clicking a button. However, in this particular example, I'm unsure where to obtain the selected row values and how to pass them on button click. After that, routing ...

javascriptangulartypescriptangular-material

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas fo ...

reactjstypescriptanimationreact-ref

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos ...

javascriptcssvue.jsaxios

Challenges encountered when implementing a personal library in a separate project

After updating a library I own, I seem to have encountered an issue when trying to use it in another project. However, the reason for this problem eludes me. A multitude of error logs with a similar theme are appearing: ERROR in ./node_modules/@company-na ...

javascriptreactjstypescript

The function forEach is unable to handle the process of uploading multiple images to cloudinary

I'm facing an issue with uploading multiple images to Cloudinary from my Vue2JS front-end. I have successfully created a function that uploads a single image, but I am struggling with uploading multiple images using a forEach loop. upload(evt) { ...

javascriptvue.jsuploadvuejs2cloudinary

What methods can be employed to stop tests from being included in rollup bundles?

I am currently in the process of creating a react component package and I would like to know how to prevent my tests folder from being included in the dist file that is generated by rollup. After running rollup -c, my directory structure looks like this: ...

javascriptreactjsnpmwebpackrollupjs

How can you manage state with ContextAPI and Typescript in a React application?

I seem to be facing an issue that I can't quite figure out. I have experience using ContextAPI without TypeScript, and I believe I'm implementing TypeScript correctly. However, something seems off as nothing happens when I call the setter. My goa ...

reactjstypescriptreact-statereact-typescriptreact-context

Saving an incremented number using Vue JS in Firebase database

I have a VueJS app integrated with Firebase JSON database where I'm trying to implement a feature that allows users to update the vote count of a comment by clicking an arrow (similar to upvotes on this website). The function works properly, but the V ...

javascriptfirebasefirebase-realtime-databasevue.jsvuefire

TSLint flagging a parsing issue in type guard while TypeScript compiler fails to pick up on any errors

I am facing an issue with my TypeScript method that includes a type guard: export function isArray(item: any): item is Array<any> { return item.constructor === Array; } After running tslint on the file, I encountered the following error message ...

typescripttypescript-typingstslint

Thorough exploration of a collection of varied, categorized items

My goal is to have TypeScript ensure that all cases are covered when mapping over a union like this: type Union = { type: 'A', a: string } | { type: 'B', b: number } The handler for the Union: const handle = (u: Union): string = ...

typescripttypesfunctional-programmingtypescript2.0

Resetting the index and length in Vue.js each time a new page is loaded

Currently facing an unusual issue that I'm struggling to resolve. My goal was to include an index number in a for-each loop and calculate the total count of data within my vue.js component. While I successfully achieved this, I encountered a problem w ...

javascriptlaravelvue.js

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

javascripthtmlreactjstypescript

How to reference an array from one component to another in Angular 2

Within my AddUserComponent, I have a public array declared like this: public arr: Array<any> = [] This array stores the names of users. Now, I need to access these values in another component called AddTopicComponent in order to display the user&a ...

angulartypescript