How can I fix error: Cannot find package 'vite-tsconfig-paths' while deploying Shopify app on Fly.io?

Question

I'm attempting to deploy a shopify react app on Fly.io using the flyctl deploy --remote-only command.

I'm getting this error during step 6/7 RUN npm run build: failed to load config from /app/vite.config.js error during build: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-tsconfig-paths' imported from /app/vite.config.js.timestamp-1708983768258-03257a63bd4a1.mjs

Here is my vite.config.js file:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import { resolve } from "path";
import tsconfigPaths from "vite-tsconfig-paths";

// Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176
// Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the remix server. The CLI will eventually
// stop passing in HOST, so we can remove this workaround after the next major release.
if (
  process.env.HOST &&
  (!process.env.SHOPIFY_APP_URL ||
    process.env.SHOPIFY_APP_URL === process.env.HOST)
) {
  process.env.SHOPIFY_APP_URL = process.env.HOST;
  delete process.env.HOST;
}

const host = new URL(process.env.SHOPIFY_APP_URL || "http://localhost")
  .hostname;
let hmrConfig;

if (host === "localhost") {
  hmrConfig = {
    protocol: "ws",
    host: "localhost",
    port: 64999,
    clientPort: 64999,
  };
} else {
  hmrConfig = {
    protocol: "wss",
    host: host,
    port: parseInt(process.env.FRONTEND_PORT) || 8002,
    clientPort: 443,
  };
}

export default defineConfig({
  server: {
    port: Number(process.env.PORT || 3000),
    hmr: hmrConfig,
  },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
    }),
    tsconfigPaths(),
  ],
  build: {
    assetsInlineLimit: 0,
  },
});

and here is my package.json file:

{
  "name": "wall-blush-plus",
  "private": true,
  "scripts": {
    "build": "vite build && vite build --ssr",
    "dev": "shopify app dev",
    "config:link": "shopify app config link",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "config:use": "shopify app config use",
    "env": "shopify app env",
    "start": "remix-serve ./build/server/index.js",
    "docker-start": "npm run setup && npm run start",
    "setup": "prisma generate && prisma migrate deploy",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "shopify": "shopify",
    "prisma": "prisma",
    "graphql-codegen": "graphql-codegen",
    "vite": "vite"
  },
  "type": "module",
  "dependencies": {
    "@prisma/client": "^5.8.0",
    "@remix-run/dev": "^2.7.1",
    "@remix-run/node": "^2.7.1",
    "@remix-run/react": "^2.7.1",
    "@remix-run/serve": "^2.7.1",
    "@shopify/app": "3.56.2",
    "@shopify/cli": "3.56.2",
    "@shopify/polaris": "^12.0.0",
    "@shopify/shopify-api": "^9.2.0",
    "@shopify/shopify-app-remix": "^2.5.0",
    "@shopify/shopify-app-session-storage-prisma": "^3.0.0",
    "isbot": "^4.1.0",
    "prisma": "^5.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/eslint-config": "^2.7.1",
    "@shopify/api-codegen-preset": "^0.0.2",
    "@shopify/app-bridge-types": "^0.0.6",
    "@types/eslint": "^8.40.0",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^9.1.0",
    "prettier": "^3.2.4",
    "typescript": "^5.2.2",
    "vite": "^5.1.3",
    "vite-tsconfig-paths": "^4.3.1"
  },
  "workspaces": [
    "extensions/*"
  ],
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ],
  "author": "nickpulizzano"
}

Let me know if you have any questions and thank you for looking into my issue. I am on node version 21.6.2

I have tried updating my node version and updating my vite-tsconfig-paths version as well.