RemixImage loader error: Cannot read properties of undefined (reading 'fetch')

[jamespsterling]

context.ASSETS.fetch is undefined at runtime

Using the cloudflare-pages example I am running into issues with the context.ASSETS.fetch(...) fetcher not being defined.

[1] TypeError: Cannot read properties of undefined (reading 'fetch')
[1]     at resolver (0nqn6wg3bh8j.js:29754:48)
[1]     at exports.imageLoader (0nqn6wg3bh8j.js:21486:26)
[1]     at async callRouteLoaderRR (0nqn6wg3bh8j.js:3342:16)
[1]     at async callLoaderOrAction (0nqn6wg3bh8j.js:2447:16)
[1]     at async Promise.all (index 0)
[1]     at async loadRouteData (0nqn6wg3bh8j.js:2181:19)
[1]     at async queryImpl (0nqn6wg3bh8j.js:2061:20)
[1]     at async Object.queryRoute (0nqn6wg3bh8j.js:2042:18)
[1]     at async handleResourceRequestRR (0nqn6wg3bh8j.js:3547:20)
[1]     at async 0nqn6wg3bh8j.js:3612:92 {
[1]   stack: TypeError: Cannot read properties of undefined (re....js:3547:20)
[1]     at async 0nqn6wg3bh8j.js:3612:92,
[1]   message: Cannot read properties of undefined (reading 'fetch')

I think I have narrowed it down to entry.server.tsx having both remixContext & loadContext,

  remixContext: EntryContext,
  loadContext: AppLoadContext,

where only remixContext is passed into <RemixServer ... /> and appears that loadContext has the fetcher and it not used in this iteration of remix + cloudfare-pages.

I think I've searched as deep as I can on this issue, and it appears that either remix and/or @remix-run/cloudflare projects have made changes to context that the documentation/examples in the remix-image repo might not be up-to-date with.

Your Example Website or App

https://github.com/jamespsterling/jamespsterling-remix/tree/remix-image/app

Steps to Reproduce the Bug or Issue

This is a runtime issue with the context, check the repo link for the code.

Expected behavior

The fetcher should be available at runtime, wondering if I need to combine both contexts to be able to use them in the image loader.

Screenshots or Videos

Here is the entry.server.tsx,
https://github.com/jamespsterling/jamespsterling-remix/blob/remix-image/app/entry.server.tsx#L17

Here is the image loader,
https://github.com/jamespsterling/jamespsterling-remix/blob/remix-image/app/routes/_public.api.image._index.tsx#L16

Platform

• OS: macOS (M1)
• Browser: Chrome
• Version: 1.4.0

Dependency versions

  "dependencies": {
    "@cloudflare/kv-asset-handler": "^0.2.0",
    "@fontsource/open-sans": "^5.0.8",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@remix-run/cloudflare": "^1.19.0",
    "@remix-run/cloudflare-pages": "^1.19.0",
    "@remix-run/css-bundle": "^1.19.0",
    "@remix-run/react": "^1.19.0",
    "bootstrap": "^5.3.1",
    "clsx": "^2.0.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-svg": "^16.1.18",
    "remix-image": "^1.4.0",
    "tw-elements": "^1.0.0-beta3"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^3.19.0",
    "@remix-run/dev": "^1.19.0",
    "@remix-run/eslint-config": "^1.19.0",
    "@svgr/cli": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
    "@svgr/plugin-prettier": "^8.1.0",
    "@svgr/plugin-svgo": "^8.1.0",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "autoprefixer": "^10.4.15",
    "concurrently": "^8.2.0",
    "cssnano": "^6.0.1",
    "eslint": "^8.38.0",
    "npm-run-all": "^4.1.5",
    "npm-watch": "^0.11.0",
    "postcss": "^8.4.28",
    "postcss-import": "^15.1.0",
    "prettier": "^3.0.2",
    "prettier-plugin-tailwindcss": "^0.5.3",
    "sass": "^1.63.6",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.4",
    "wrangler": "^3.6.0"
  },

Additional context

Here are some threads around the changes to loadContext: AppLoadContext,

remix-run/remix#5836
remix-run/remix#2045
remix-run/remix#5314

Thread on changes to static context.ASSETS,
cloudflare/workers-sdk#1162

Using React 18 Streaming w/ Remix,
https://remix.run/docs/en/main/guides/streaming#enable-react-18-streaming

[jamespsterling]

I am also wondering if I need to change how my functions are generated? https://developers.cloudflare.com/pages/platform/functions/advanced-mode/