Integrate Remix with Cloudflare Pages

node_modules/remix/esm/index.js:11:14: error: Could not resolve "./client"
    11 │ export * from './client';
       ╵               ~~
node_modules/remix/esm/index.js:12:14: error: Could not resolve "./server"
    12 │ export * from './server';
       ╵               ~~
node_modules/remix/esm/index.js:13:14: error: Could not resolve "./platform"
    13 │ export * from './platform';
       ╵               ~~~~
Build failed with 3 errors:
node_modules/remix/esm/index.js:11:14: error: Could not resolve "./client"
node_modules/remix/esm/index.js:12:14: error: Could not resolve "./server"
node_modules/remix/esm/index.js:13:14: error: Could not resolve "./platform"

import { createEventHandler } from "@remix-run/cloudflare-workers"
import * as build from "../build/index.js"
addEventListener("fetch", createEventHandler({ build }))

export default {
  async fetch(request, environment, context) {
    return new Response("I’m a module!")
  },
  async scheduled(controller, environment, context) {
    // await doATask();
  },
}

global process = {
  env: global
}

if (ENVIRONMENT === "production") {
  // production
} else if (ENVIRONMENT === "staging") {
  // staging
} else if (ENVIRONMENT === "dev") {
  // dev
} else {
  throw new Error(
    "You are running an ENVIRONMENT that CloudFlare does not support.",
  )
}

app
build
functions
[[path]].ts
node_modules

app
build
public
_worker.js
_worker.map.js
build
index.js
node_modules

--do COUNTER=Counter@path/to/root

--do COUNTER=Counter@

import parseFormData from "@ssttevee/cfw-formdata-polyfill/ponyfill"
export const action: ActionFunction = async ({ request, context }) => {
  const form = await parseFormData.call(request)
  const file = form.get("file") as Blob
  invariant(file, "File is required")
  const body = new FormData()
  body.append(
    "file",
    new Blob([await file.arrayBuffer()], { type: "image/png" }),
    "file.png"
  )
  const response = await fetch(url, {
      method: "POST",
      body,
    }
  )

const uploadHandler = async (file: Blob) => {
  const body = new FormData()
  body.append(
    "file",
    new Blob([await file.arrayBuffer()], {
      type: "image/png",
    }),
    "file.png",
  )
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${accountId}/images/v1`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${token}`,
      },
      body,
    },
  )
  const string = await response.text()
  if (string.includes("ERROR")) {
    // ERROR 9422: Decode error: image failed to be decoded: Uploaded image must have image/jpeg or image/png content type
    console.error(string)
    return undefined
  }
  const { result } = JSON.parse(string)
  return result.variants[0]
}

import parseFormData from "@ssttevee/cfw-formdata-polyfill/ponyfill"
export const action: ActionFunction = async ({ request, context }) => {
  const form = await parseFormData.call(request)
  const authenticator = getAuthenticator(context)
  const user = await authenticator.isAuthenticated(request)
  invariant(user, "Not authorized")
  const type = form.get("type")
  invariant(type, "Card type is required")
  const balance = form.get("balance")
  invariant(balance, "Estimated balance is required")
  const cardFront = form.get("cardFrontUrl") as Blob
  invariant(cardFront, "Card front url is required")
  const cardFrontPromise = uploadHandler(cardFront)
  const cardBack = form.get("cardBackUrl") as Blob
  invariant(cardBack, "Card Back url is required")
  const cardBackPromise = uploadHandler(cardBack)
  const receipt = form.get("receiptUrl") as Blob
  invariant(receipt, "Receipt url is required")
  const receiptPromise = uploadHandler(receipt)
  await createCard({
    type: type.toString() as CardType,
    estimatedBalance: balance.toString(),
    userId: user.id,
    cardBackUrl: await cardFrontPromise,
    cardFrontUrl: await cardBackPromise,
    receiptUrl: await receiptPromise,
  })
  return {
    success: true,
  }
}

npm remove wrangler/pages
npm install @cloudflare/wrangler

npx patch-package

remix setup cloudflare-pages

PRISMA_CLIENT_ENGINE_TYPE=dataproxy prisma generate

Failed: an internal error occurred

Could not resolve "async_hooks" (use "platform: 'node'" when building for node)
Could not resolve "_http_common" (use "platform: 'node'" when building for node)

Could not resolve "https" (use "platform: 'node'" when building for node)
Could not resolve "zlib" (use "platform: 'node'" when building for node)
Could not resolve "fs" (use "platform: 'node'" when building for node)

import NodeModulesPolyfill from "@esbuild-plugins/node-modules-polyfill"
const { NodeModulesPolyfillPlugin } = NodeModulesPolyfill
esbuild.build({
  …
  plugins: [
        NodeModulesPolyfillPlugin(),
        …
  ],
})

require is not defined
cannot read property resolve of undefined
require.resolve is not a function

import alias from "esbuild-plugin-alias"
import NodeModule from "module"
const { createRequire } = NodeModule
const require = createRequire(import.meta.url)
esbuild.build({
  …
  plugins: [
        …
        alias({
          "@prisma/client": require.resolve("@prisma/client"),
        }),
        …
  ],
})

const environment = process.env.NODE_ENV
  ? process.env.NODE_ENV.toLowerCase()
  : "development"
const version = process.env.VERSION
  ? process.env.VERSION
  : new Date().toISOString()
esbuild.build({
  …
  define: {
    process: JSON.stringify({
      env: {
        NODE_ENV: mode,
        VERSION: version,
        DATABASE_URL: process.env.DATABASE_URL,
        …
      },
    }),
  },
})

import invariant from "tiny-invariant"
type HashArgs = {
  password: string
  pepper?: string
  iterations?: number
}
/**
 * Hashes password using the PBKDF2 algorithm
 *
 * @example
 *  const hash = await hash({
 *    password: passwordInput.toString(),
 *    pepper: context.authPepper,
 *  })
 */
export const hash = async ({
  password,
  pepper = "",
  iterations = 1e5,
}: HashArgs) => {
  const passwordUtf = new TextEncoder().encode(
    `${password}${pepper}`,
  ) // encode pw as UTF-8
  const passwordKey = await crypto.subtle.importKey(
    "raw",
    passwordUtf,
    "PBKDF2",
    false,
    ["deriveBits"],
  )
  const saltIntArray = crypto.getRandomValues(
    new Uint8Array(16),
  ) // get random salt
  const keyBuffer = await crypto.subtle.deriveBits(
    {
      name: "PBKDF2",
      hash: "SHA-256",
      salt: saltIntArray.buffer,
      iterations: iterations,
    },
    passwordKey,
    256,
  )
  const keyBytes = Array.from(new Uint8Array(keyBuffer))
  const saltBytes = Array.from(new Uint8Array(saltIntArray))
  const iterationsHex = (
    "000000" + iterations.toString(16)
  ).slice(-6)
  const iterationsPairs = iterationsHex.match(/.{2}/g)
  invariant(iterationsPairs)
  const iterationsBytes = iterationsPairs.map((byte) =>
    parseInt(byte, 16),
  )
  const compositeBytes = [
    ...saltBytes,
    ...iterationsBytes,
    ...keyBytes,
  ]
  const compositeString = compositeBytes
    .map((byte) => String.fromCharCode(byte))
    .join("")
  const compositeBase64 = (
    btoa as (data: string) => string
  )("v01" + compositeString)
  return compositeBase64
}
type VerifyArgs = {
  hash: string
  password: string
  pepper?: string
}
/**
 * Verifies that the supplied password (user input) matches the supplied hash
 *
 * @example
 *   const isValid = await pbkdf2.verify({
 *     password: passwordInput.toString(),
 *     pepper: authPepper,
 *     hash: dbUser.password,
 *   })
 */
export const verify = async ({
  hash,
  password,
  pepper = "",
}: VerifyArgs) => {
  let compositeString = null
  try {
    compositeString = (atob as (data: string) => string)(
      hash,
    )
  } catch (e) {
    throw new Error("Invalid hash")
  }
  const INITIAL_PREFIX_LENGTH = 0
  const VERSION_LENGTH = 3
  const SALT_LENGTH = 16
  const ITERATIONS_LENGTH = 3
  const KEY_LENGTH = 32
  const versionString = compositeString.slice(
    INITIAL_PREFIX_LENGTH,
    VERSION_LENGTH,
  )
  const saltString = compositeString.slice(
    VERSION_LENGTH,
    VERSION_LENGTH + SALT_LENGTH,
  )
  const iterationsString = compositeString.slice(
    VERSION_LENGTH + SALT_LENGTH,
    VERSION_LENGTH + SALT_LENGTH + ITERATIONS_LENGTH,
  )
  const keyString = compositeString.slice(
    VERSION_LENGTH + SALT_LENGTH + ITERATIONS_LENGTH,
    VERSION_LENGTH +
      SALT_LENGTH +
      ITERATIONS_LENGTH +
      KEY_LENGTH,
  )
  if (versionString != "v01")
    throw new Error("Invalid hash")
  const saltCharacters = saltString.match(/./g)
  invariant(saltCharacters)
  const saltIntArray = new Uint8Array(
    saltCharacters.map((ch) => ch.charCodeAt(0)),
  )
  const iterationsCharacters = iterationsString.match(/./g)
  invariant(iterationsCharacters)
  const iterationsHex = iterationsCharacters
    .map((ch) => ch.charCodeAt(0).toString(16))
    .join("")
  const iterations = parseInt(iterationsHex, 16)
  const passwordUtf = new TextEncoder().encode(
    `${password}${pepper}`,
  )
  const passwordKey = await crypto.subtle.importKey(
    "raw",
    passwordUtf,
    "PBKDF2",
    false,
    ["deriveBits"],
  )
  const keyBuffer = await crypto.subtle.deriveBits(
    {
      name: "PBKDF2",
      hash: "SHA-256",
      salt: saltIntArray.buffer,
      iterations: iterations,
    },
    passwordKey,
    256,
  )
  const keyBytes = Array.from(new Uint8Array(keyBuffer))
  const newKeyString = keyBytes
    .map((byte) => String.fromCharCode(byte))
    .join("")
  return newKeyString == keyString
}