Upgrading from 2023.10.4 -> 2024.1.5 throws errors

[umxr]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Other / I don't know

What version of that package or tool are you using?

Latest

What version of Remix are you using?

2.8.0

Steps to Reproduce

upgrading from 2023.10.4 -> 2024.1.5

below is my package.json

{
"scripts": {
    "build": "shopify hydrogen build",
    "dev": "shopify hydrogen dev",
    "preview": "npm run build && shopify hydrogen preview",
    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
    "format": "npx prettier --write . --ignore-path .gitignore",
    "typecheck": "tsc --noEmit",
    "g": "shopify hydrogen generate"
  },
  "prettier": "@shopify/prettier-config",
  "dependencies": {
    "@headlessui/react": "^1.7.15",
    "@hookform/resolvers": "^2.9.7",
    "@klevu/core": "^1.9.0",
    "@portabletext/react": "^3.0.4",
    "@remix-run/node": "2.8.0",
    "@remix-run/react": "2.8.0",
    "@sanity/asset-utils": "^1.3.0",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/client": "^3.3.2",
    "@sanity/image-url": "^1.0.2",
    "@sanity/mutator": "^3.14.1",
    "@sanity/types": "^3.14.1",
    "@sanity/vision": "^3.2.4",
    "@shopify/cli": "3.56.3",
    "@shopify/cli-hydrogen": "7.1.2",
    "@shopify/hydrogen": "2024.1.5",
    "@shopify/remix-oxygen": "2.0.3",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tippyjs/react": "^4.2.6",
    "class-variance-authority": "^0.7.0",
    "clsx": "^1.2.1",
    "crypto-js": "^4.2.0",
    "embla-carousel-autoplay": "^7.0.5",
    "embla-carousel-react": "^7.1.0",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "hydrogen-sanity": "^3.0.0",
    "isbot": "^3.6.12",
    "jwt-decode": "^4.0.0",
    "lodash.filter": "^4.6.0",
    "pluralize-esm": "^9.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-intersection-observer": "^9.4.3",
    "react-lazy-media": "^0.3.1",
    "react-router-dom": "^6.4.2",
    "react-slick": "^0.30.1",
    "react-social-media-embed": "^2.3.5",
    "react-tabs": "^5.1.0",
    "react-use-pagination": "^2.0.1",
    "snakecase-keys": "^5.5.0",
    "tiny-invariant": "^1.3.1",
    "use-react-router-breadcrumbs": "^4.0.0",
    "usehooks-ts": "^2.13.0",
    "yet-another-react-lightbox": "^3.12.0"
  },
  "devDependencies": {
    "@remix-run/dev": "2.8.0",
    "@shopify/oxygen-workers-types": "4.0.0",
    "@shopify/prettier-config": "^1.1.2",
    "@types/crypto-js": "^4.2.1",
    "@types/eslint": "^8.37.0",
    "@types/lodash.debounce": "^4.0.9",
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@types/react-slick": "^0.23.13",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-plugin-hydrogen": "0.12.3",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "postcss": "^8.4.22",
    "prettier": "^2.8.7",
    "prettier-plugin-tailwindcss": "^0.2.7",
    "tailwind-merge": "^1.13.2",
    "tailwindcss": "^3.3.2",
    "typescript": "5.2.2"
  },
  "engines": {
    "node": ">=16.13"
  }
}

Expected Behavior

should run locally after running shopify hydrogen dev

Actual Behavior

i see a wall of errors

✘ [ERROR] Could not resolve "http"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:3:21:
      3 │ const http = require('http');
        ╵                      ~~~~~~

  The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "https"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:4:22:
      4 │ const https = require('https');
        ╵                       ~~~~~~~

  The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "zlib"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:5:21:
      5 │ const zlib = require('zlib');
        ╵                      ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "fs"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:6:19:
      6 │ const fs = require('fs');
        ╵                    ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "stream"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:10:23:
      10 │ const Stream = require('stream');
         ╵                        ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "crypto"

    node_modules/@remix-run/web-fetch/dist/lib.node.cjs:15:23:
      15 │ const crypto = require('crypto');

[blittle]

I recommend following the steps to first upgrade to 2024.1. Then run h2 upgrade to upgrade to 2024.4.