[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Help](/c/help/9)

# @vercel/postgres breaks while Vercel React project is deployed

82 views · 1 like · 3 posts


Izzy1090 (@izzy1090) · 2024-08-07

## Update

I discovered that GitHub never picked up my initial package.json change which included me adding "type": "module" and editing all the import statements to have file extensions added to the reference (e.g. import App from "./app.js").

### Summary

I connected my Vercel Postgres database to a project and was able to test adding/modifying tables while using a local server when using vercel dev and visiting the relative pathname of the component with params added (e.g. http://localhost:3000/api/add-pet?petName=Rhubarb&ownerName=Edie). 

However when I commit my work to a feature branch and try visiting the relative pathname via the deployment, I get a "This Serverless Function has crashed." When I check the logs I get "Cannot find module '/var/task/node_modules/@vercel/postgres/dist/index-node.cjs'
Did you forget to add it to "dependencies" in `package.json`?"

I've tried adding "type": "module" to my package.json ([as seen from this post](https://github.com/orgs/vercel/discussions/3210)) and had no luck. 

Here's my package.json: 

```
{
  "name": "edie-templeton-design",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@vercel/postgres": "^0.9.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "serve": "^14.2.3",
    "vercel": "^35.2.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}
``` 

And here's the API code with the function included: 

```
import { sql } from '@vercel/postgres';
 
export default async function handler(request, response) {
  try {
    const petName = request.query.petName;
    const ownerName = request.query.ownerName;
    if (!petName || !ownerName) throw new Error('Pet and owner names required');
    await sql`INSERT INTO Pets (Name, Owner) VALUES (${petName}, ${ownerName});`;
  } catch (error) {
    return response.status(500).json({ error });
  }
 
  const pets = await sql`SELECT * FROM Pets;`;
  return response.status(200).json({ pets });
}
``` 

### Example

https://edie-templeton-design-9x3azkvve-izzy1090s-projects.vercel.app/api/add-pet?petName=Rhubarb&ownerName=Edie

### Steps to Reproduce

Visit the link and you'll see the Serverless Function error.


Pauline P. Narvas (@pawlean) · 2024-08-08 · ♥ 1

Hi, @izzy1090!

You might want to delete your `node_modules` directory and `package-lock.json` file and then run `npm install` again to ensure a clean installation. This can make sure that `@vercel/postgres` is correctly listed in your `dependencies` and that it is installed properly.


Izzy1090 (@izzy1090) · 2024-08-08

Hi @pawlean ! I was trying to find a way to mark this question as resolved. I discovered that GitHub never picked up my latest change to the `package.json` which included the inclusion of `"type": "module"`. I also had to alter all of the import statements to include file extensions (e.g. `import App from "./app.js"`). 

Thank you for responding as well, I really appreciate it.