Challenges encountered while deploying a NextJS project with TypeScript on Vercel

Question

Challenges encountered while deploying a NextJS project with TypeScript on Vercel

Encountering an error on Vercel during the build deploy process. The error message says:

https://i.stack.imgur.com/Wk0Rw.png

Oddly, the command pnpm run build works smoothly on my PC. Both it and the linting work fine. Upon inspecting the code, I noticed that both types here are numbers:

https://i.stack.imgur.com/D6C1j.png

https://i.stack.imgur.com/UIfhW.png

No errors are being reported on this line even after using parseInt on idValue.

Attempts made to resolve the issue:

Tried redeploying without Vercel cache (unchecked the option when redeploying).
Cleared git cache with git rm -r --cached .
Tested converting the variable to a string. In local code, compatibility issues were raised, but on Vercel, a new error appeared in another field with the same problem.

Had set up GitHub Actions, but disabled it thinking it might be causing the issue, but no luck.

Sharing my repo link for assistance: https://github.com/KajiyamaVK/ipve/

The error path is specified in the folder.

EDIT:

Removing parseInt resulted in the component requesting a number as expected.

https://i.stack.imgur.com/LzegZ.png

SOLUTION

Resolved by deleting node_modules and reinstalling pnpm. All errors became visible afterwards.

typescript next.js vercel next.js13 pnpm

Answer 1

Answer №1

After reviewing your code, I noticed that the data types were not properly set up. Specifically, the prop id in the TableRow component is expecting a string, but you have provided it with a number as indicated in line 289

 const idValue = parseInt(row.getValue('id'));

Instead of converting idValue to a number, keep it as a string. You can then convert idValue to a number on line 296.

Replace line 288 to line 312 with the following code block:

 table.getRowModel().rows.map((row) => {
                const idValue: string = row.getValue("id");
                return (
                  <TableRow
                    key={row.id}
                    id={idValue}
                    className="hover:bg-primary-dark hover:text-primary-foreground cursor-pointer "
                    data-state={row.getIsSelected() && "selected"}
                    onClick={() => handleViewState(parseInt(idValue))}
                  >
                    {row.getVisibleCells().map((cell) => renderTableCell(cell))}
                    <TableCell className="flex gap-2 cursor-pointer">
                      <button
                        aria-label="Deletar"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDelete(parseInt(idValue));
                        }}
                      >
                        <Trash size={24} />
                      </button>
                    </TableCell>
                  </TableRow>
                );
              })

Answer 2

After reviewing your code, I noticed that the data types were not properly set up. Specifically, the prop id in the TableRow component is expecting a string, but you have provided it with a number as indicated in line 289

 const idValue = parseInt(row.getValue('id'));

Instead of converting idValue to a number, keep it as a string. You can then convert idValue to a number on line 296.

Replace line 288 to line 312 with the following code block:

 table.getRowModel().rows.map((row) => {
                const idValue: string = row.getValue("id");
                return (
                  <TableRow
                    key={row.id}
                    id={idValue}
                    className="hover:bg-primary-dark hover:text-primary-foreground cursor-pointer "
                    data-state={row.getIsSelected() && "selected"}
                    onClick={() => handleViewState(parseInt(idValue))}
                  >
                    {row.getVisibleCells().map((cell) => renderTableCell(cell))}
                    <TableCell className="flex gap-2 cursor-pointer">
                      <button
                        aria-label="Deletar"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDelete(parseInt(idValue));
                        }}
                      >
                        <Trash size={24} />
                      </button>
                    </TableCell>
                  </TableRow>
                );
              })

Answer 3

Answer №2

After deleting the node_modules folder and recreating it, I experienced a sudden surge of errors on my local machine.

Answer 4

After deleting the node_modules folder and recreating it, I experienced a sudden surge of errors on my local machine.

Challenges encountered while deploying a NextJS project with TypeScript on Vercel

Answer №1

Answer №2

Similar questions

Encountering an error with the Next Auth adapter in TypeScript when attempting to modify the default User interface

Attempting to establish a connection with MongoDB through Realm

What is the best way to associate dates with a particular ID within a textfield's value?

Issue: ERROR! Unable to locate bash ENOENT & ERR! system call spawn bash

Framer Motion's "repeatType" property triggering a TypeError

Has the caching and revalidating feature in Next.js 13.4 stopped working?

Creating a flexible TypeScript function handler that accepts optional arguments depending on the function's name

Applying ngClass to a row in an Angular material table

Ways to receive one of two variations

Setting default values for class members in Typescript is important for ensuring consistent behavior and

Instructions on transferring JSON data to clipboard using a button

Is there a syntax available for type annotation of arrays created from pre-declared variables?

What are the reasons behind the unforeseen outcomes when transferring cookie logic into a function?

How can I display a new module in Angular without navigating to it?

searchByTextContentUnderListItemAnchorTag

Tips for excluding the "use client" term in the upcoming 13 using Material UI

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?

What could be causing the favicon in my Next.js application to not function properly?

Electron does not have the capability to utilize Google's Speech to Text engine

Angular route fails to load the HTML file