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

So I cloned the ecom starter package in Vercel and I keep getting this error as well as others. First it did not recognize React and React-dom even though it was shown in the dependencies.

npm WARN [email protected] requires a peer of react@^16.6.0 || ^17 but none is installed. You must install peer dependencies yourself.

So I ran npm install && update.

I learned about the issue with node_modules in .gitignore while node_modules was in the file I still ran npm rm -rf node_modules and then npm i again but still getting nowhere.

ready – started server on 0.0.0.0:3000, url: http://localhost:3000
Error: The commerce provider is missing, please add a valid provider name or its environment variables
at withCommerceConfig (/Users/ThomasJMai/Sites/ecom/framework/commerce/config.js:28:11)
at Object. (/Users/ThomasJMai/Sites/ecom/next.config.js:11:18)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at loadConfig (/Users/ThomasJMai/Sites/ecom/node_modules/next/dist/next-server/server/config.js:8:94)
at async NextServer.loadConfig (/Users/ThomasJMai/Sites/ecom/node_modules/next/dist/server/next.js:1:2962)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: next start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Here is the package.json file

{
      "name": "nextjs-commerce",
      "version": "1.0.0",
      "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "analyze": "BUNDLE_ANALYZE=both yarn build",
        "prettier-fix": "prettier --write .",
        "find:unused": "next-unused",
        "generate": "graphql-codegen",
        "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
      },
      "sideEffects": false,
      "license": "MIT",
      "engines": {
        "node": "14.x"
      },
      "dependencies": {
        "@reach/portal": "^0.11.2",
        "@vercel/fetch": "^6.1.0",
        "autoprefixer": "^10.2.4",
        "body-scroll-lock": "^3.1.5",
        "bowser": "^2.11.0",
        "classnames": "^2.2.6",
        "cookie": "^0.4.1",
        "dot-object": "^2.1.4",
        "email-validator": "^2.0.4",
        "immutability-helper": "^3.1.1",
        "js-cookie": "^2.2.1",
        "keen-slider": "^5.2.4",
        "lodash.debounce": "^4.0.8",
        "lodash.random": "^3.2.0",
        "lodash.throttle": "^4.1.1",
        "next": "^10.0.9-canary.5",
        "next-seo": "^4.11.0",
        "next-themes": "^0.0.4",
        "postcss": "^8.2.6",
        "postcss-nesting": "^7.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-merge-refs": "^1.1.0",
        "react-ticker": "^1.2.2",
        "shopify-buy": "^2.11.0",
        "swr": "^0.4.0",
        "tabbable": "^5.1.5",
        "tailwindcss": "^2.0.3"
      },
      "devDependencies": {
        "@graphql-codegen/cli": "^1.20.0",
        "@graphql-codegen/schema-ast": "^1.18.1",
        "@graphql-codegen/typescript": "^1.19.0",
        "@graphql-codegen/typescript-operations": "^1.17.13",
        "@manifoldco/swagger-to-ts": "^2.1.0",
        "@next/bundle-analyzer": "^10.0.1",
        "@types/body-scroll-lock": "^2.6.1",
        "@types/classnames": "^2.2.10",
        "@types/cookie": "^0.4.0",
        "@types/js-cookie": "^2.2.6",
        "@types/lodash.debounce": "^4.0.6",
        "@types/lodash.random": "^3.2.6",
        "@types/lodash.throttle": "^4.1.6",
        "@types/node": "^14.14.16",
        "@types/react": "^17.0.0",
        "@types/shopify-buy": "^2.10.5",
        "deepmerge": "^4.2.2",
        "graphql": "^15.4.0",
        "husky": "^4.3.8",
        "lint-staged": "^10.5.3",
        "next-unused": "0.0.6",
        "postcss-flexbugs-fixes": "^4.2.1",
        "postcss-preset-env": "^6.7.0",
        "prettier": "^2.2.1",
        "typescript": "^4.0.3"
      },
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "**/*.{js,jsx,ts,tsx}": [
          "prettier --write",
          "git add"
        ],
        "**/*.{md,mdx,json}": [
          "prettier --write",
          "git add"
        ]
      },
      "next-unused": {
        "alias": {
          "@lib/*": [
            "lib/*"
          ],
          "@assets/*": [
            "assets/*"
          ],
          "@config/*": [
            "config/*"
          ],
          "@components/*": [
            "components/*"
          ],
          "@utils/*": [
            "utils/*"
          ]
        },
        "debug": true,
        "include": [
          "components",
          "lib",
          "pages"
        ],
        "exclude": [],
        "entrypoints": [
          "pages"
        ]
      }
}

I am pretty confused since this is supposed to be a starter package but I cant even deploy it. I am new to Nextjs but what is going on here and what the heck am I missing?