@vercel/postgres breaks while Vercel React project is deployed

[izzy1090]

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) 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.

[pawlean]

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]

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.