Error after cloning the official Vercel commerce Shopify repo: https://github.com/vercel/commerce

Question

After cloning this repo (https://github.com/vercel/commerce) and following all instructions in the "Running locally" paragraph I get this error:

error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getMenu($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        title\n        url\n      }\n    }\n  }\n'
}
- error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getCollectionProducts(\n    $handle: String!\n    $sortKey: ProductCollectionSortKeys\n    $reverse: Boolean\n  ) {\n    collection(handle: $handle) {\n      products(sortKey: $sortKey, reverse: $reverse, first: 100) {\n        edges {\n          node {\n            ...product\n          }\n        }\n      }\n    }\n  }\n  \n  fragment product on Product {\n    id\n    handle\n    availableForSale\n    title\n    description\n    descriptionHtml\n    options {\n      id\n      name\n      values\n    }\n    priceRange {\n      maxVariantPrice {\n        amount\n        currencyCode\n      }\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    variants(first: 250) {\n      edges {\n        node {\n          id\n          title\n          availableForSale\n          selectedOptions {\n            name\n            value\n          }\n          price {\n            amount\n            currencyCode\n          }\n        }\n      }\n    }\n    featuredImage {\n      ...image\n    }\n    images(first: 20) {\n      edges {\n        node {\n          ...image\n        }\n      }\n    }\n    seo {\n      ...seo\n    }\n    tags\n    updatedAt\n  }\n  \n  fragment image on Image {\n    url\n    altText\n    width\n    height\n  }\n\n  \n  fragment seo on SEO {\n    description\n    title\n  }\n\n\n'
}
- error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getCollectionProducts(\n    $handle: String!\n    $sortKey: ProductCollectionSortKeys\n    $reverse: Boolean\n  ) {\n    collection(handle: $handle) {\n      products(sortKey: $sortKey, reverse: $reverse, first: 100) {\n        edges {\n          node {\n            ...product\n          }\n        }\n      }\n    }\n  }\n  \n  fragment product on Product {\n    id\n    handle\n    availableForSale\n    title\n    description\n    descriptionHtml\n    options {\n      id\n      name\n      values\n    }\n    priceRange {\n      maxVariantPrice {\n        amount\n        currencyCode\n      }\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    variants(first: 250) {\n      edges {\n        node {\n          id\n          title\n          availableForSale\n          selectedOptions {\n            name\n            value\n          }\n          price {\n            amount\n            currencyCode\n          }\n        }\n      }\n    }\n    featuredImage {\n      ...image\n    }\n    images(first: 20) {\n      edges {\n        node {\n          ...image\n        }\n      }\n    }\n    seo {\n      ...seo\n    }\n    tags\n    updatedAt\n  }\n  \n  fragment image on Image {\n    url\n    altText\n    width\n    height\n  }\n\n  \n  fragment seo on SEO {\n    description\n    title\n  }\n\n\n'
}
- error {
  cause: 'TypeError [ERR_INVALID_URL]: Invalid URL',
  status: 500,
  message: 'URL is malformed "/api/2023-01/graphql.json". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls',
  query: '\n  query getMenu($handle: String!) {\n    menu(handle: $handle) {\n      items {\n        title\n        url\n      }\n    }\n  }\n'
}
- error [Error: Error: [object Object]] { digest: '2479588004' }
- error [Error: Error: [object Object]] { digest: '2479588004' }
- error [Error: Error: [object Object]] { digest: '2479588004' }
- error [Error: Error: [object Object]] { digest: '2479588004' }

I have tried following the link on the Next.js docs, but I couldn't fix the issue.

I have tried googling the issue, trying several things of similar issues with Vercel and NextAuth. However I couldn't fix this issue as well.

I have tried to set VERCEL_URL = "http://localhost:3000"

I have tried deleting .next folder, cloning the repo 3 times while following instructions to the dot

I have tried this: Error: The commerce provider is missing - Why do I keep getting this error in Nextjs Vercel Commerce Starter Package?

Can anyone think of a fix? Thank you

Answer 1

You just need to change the .env.example to .env.local and it will work.