What steps can I take to fix the 'node module error' while deploying a project on Vercel?

While working with the world-countries package, I encountered an issue during deployment in Vercel. The error message indicated that a ';' was missing in the index.d.ts file of world-countries located in the node_module directory.

Here is the exact error from Vercel:

Failed to compile. ./node_modules/world-countries/index.d.ts:45:37 Type error: ';' expected. 43 | translations: { [languageCode: string]: OfficialAndCommon } 44 | latlng: [number, number]

45 | demonyms: { [languageCode: string]?: Demonyms } (this is the line that needs to be fixed) | ^ 46 | landlocked: boolean 47 | borders: string[] 48 | area: number

I attempted deleting the '?' as suggested and the issue resolved within the file itself, but unfortunately, Vercel did not accept these changes. I also tried reverting back to the previous method where demonym was defined as a string. Additionally, I experimented with different ways to bypass the error without success.

Despite my efforts, I have not been able to resolve this issue.

typescriptdeploymentnode-modulesvercelnext.js13

Answer №1

To resolve the issue, removing the ? is necessary. However, Vercel will not accept the modified version from your local environment because it performs an npm install.

It seems that this problem will be addressed in the upcoming release of the world-countries package, as indicated in this PR

You have two choices:

Option 1

Wait for the new version of world-countries and execute 

npm install world-countries@latest

Option 2

Replace the index.d.ts file of world-countries, but how?

Step 1 Create your own index.d.ts file

Step 2 Instruct Typescript to use this custom file rather than the original one

  • Add a new path in your tsconfig.json:
"world-countries": [
    "./types/world-countries/index.d.ts"
 ],

For testing purposes, I suggest deleting the node_modules folder, performing a clean npm install, followed by npm run build.

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

essential elements for mapping an array using typescript

Struggling to iterate through an array of objects, each with a unique id created by uuidv4(), resulting in a string type. TypeScript is giving errors (( Type 'String' is not assignable to type 'Key | null | undefined')) due to the &apos ...

javascriptreactjstypescriptnext.jsreact-typescript

Struggling to access the 'payload' property of an undefined object? In TypeScript, you can easily bind and access JSON objects using *ngFor directive

I've been attempting to retrieve highscores from the server using node angular and making an http request. Although I successfully obtain the JSON file from the server, I am encountering difficulty accessing the fields for processing in the *ngFor lo ...

jsonangulartypescript

npm unable to locate a JavaScript file

Currently, I am developing an Angular 2 application that utilizes the ng2-slugify package. However, I have encountered an issue where it cannot locate one of the required slugify files, specifically "charmaps.js", even though it is stored in the same direc ...

node.jsangulartypescript

Angular and RxJS work together to repeat actions even when an HTTP request is only partially successful

I am currently attempting to achieve the following: Initiate a stop request using a stored ID in the URL. Send a request with a new ID in the URL and save this new ID. If the response code is 200, proceed as normal. If it is 204, repeat steps 1 and 2 with ...

javascriptangulartypescriptrxjs

Updating an element within a for loop using Angular TypeScript

I'm trying to figure out how to update the value of an HTML DOM element that is bound from a TypeScript file in each iteration of a for loop, rather than at the end of the loop. I want to see all values as the loop is running. For example, imagine I ...

htmlangulartypescript

Increase by 30 minutes from the minimum value and decrease by 30 minutes from the maximum value in Ionic date time

Looking to add a customized Ionic date time picker with min and max capabilities. If the minimum time is selected, it should automatically add 30 minutes, while selecting the maximum time should subtract 30 minutes. Any suggestions on how to achieve this? ...

angulartypescriptionic-framework

Issues with TypeScript arise when transferring arguments between functions

Encountering a TypeScript error due to this pattern: Error message: 'Argument of type '(string | number)[]' is not assignable to parameter of type 'string[] | number[]' function foo(value: string | number) { return bar([va ...

javascripttypescript

Is there a way to set up custom rules in eslint and prettier to specifically exclude the usage of 'of =>' and 'returns =>' in the decorators of a resolver? Let's find out how to implement this

Overview I am currently working with NestJS and @nestjs/graphql, using default eslint and prettier settings. However, I encountered some issues when creating a graphql resolver. Challenge Prettier is showing the following error: Replace returns with (r ...

typescriptgraphqlnestjseslintprettier

Problem with deploying NextJs on Vercel

I've encountered an issue when trying to deploy to Vercel by pushing code to the main branch since yesterday. Every page on my website (404, homepage, etc.) is displaying a strange error message, even though there are no instances of the useID() hook ...

reactjsnext.jsvercel

Transform **kerry James O'keeffe-martin** into **Kerry James O'Keeffe-Martin** using TypeScript and Java Script

Is there a way to capitalize names in both TypeScript and JavaScript? For example, changing kerry James O'keeffe-martin to Kerry James O'Keeffe-Martin. ...

javascripthtmltypescript

Utilizing pre-built component libraries within the application structure in Next.js version 13

When utilizing the app directory in nextJS 13, it is essential for all client components to include a "use client" directive. However, many components from popular React libraries do not have this directive. To address this issue, I discovered a workaroun ...

reactjsnext.jscomponentsnext.js13

Triggering an event in Angular 2 after ngFor loop completes

I am currently attempting to utilize a jQuery plugin that replaces the default scrollbar within dynamic elements in Angular 2. These elements are generated using an ngFor loop, making it impossible to directly attach jQuery events to them. At some point, ...

javascriptjquerytypescriptangularngfor

Using an object hierarchy in Typescript to create an if statement

Currently, I am attempting to create a logical statement using a hierarchy structure as shown below: if ((config.elementConfig.curve[0].dataset[0].splitBy = 'my discrete var')) {..... However, when implementing this statement, I encounter the er ...

typescript

Issues with tracking changes in Vue.js when using reactive variables

After triggering a click event, I am attempting to choose a message from a json file. However, I am encountering an issue where the first click does not seem to select anything. Upon the second click, the selected messages are duplicated, and this pattern ...

javascriptjsontypescriptvue.js

Managing Prisma error handling in Express

Dealing with error handling using ExpressJS and Prisma has been a challenge for me. Anytime a Prisma Exception occurs, it causes my entire Node application to crash, requiring a restart. Despite looking at the Prisma Docs and doing some research online, I ...

node.jstypescriptexpressbackendprisma

Create a function that will always output an array with the same number of elements as the input

Is there a method to generate a function that specifies "I accept an array of any type, and will return the same type with the same length"? interface FixedLengthArray<T, L extends number> extends Array<T> { length: L; } export function shuf ...

typescripttypescript-typingstypescript-generics

Firebase data causing issues with ion-gesture recognition?

Hey there! I'm currently facing an issue with my ionic app. I added the ion-gesture to my project, but due to the ngFor loop pulling data from Firebase, the cards are unable to move. Here's a snippet of my code: <ion-card *ngFor="let po ...

angulartypescriptfirebaseionic-framework

Tips for expanding interfaces/classes during variable declaration

Is it possible to extend an interface or class during variable declaration? For instance: export declare abstract class DynamicFormControlModel implements DynamicPathable { asyncValidators: DynamicValidatorsConfig | null; _disabled: boolean; ...

typescript

Subscription Code Incrementally Triggering Upon Each Component Load

Within the initialization of my component, I have the following code: public Subscription: Subscription; ngOnInit() { this.subscription = this.myService.currentData.subscribe( dataReceived => { this.data = dataReceived; this.useDa ...

angulartypescriptrxjs

What is the best way to position Scroll near a mat row in Angular?

With over 20 records loaded into an Angular Material table, I am experiencing an issue where clicking on the last row causes the scroll position to jump to the top of the page. I would like the scroll position to be set near the clicked row instead. Is th ...

javascriptangulartypescriptuiscrollviewangular-material-table