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
Steps to Reproduce
Visit the link and you'll see the Serverless Function error.