[shopify-app-remix] [cloudflare] deployment fails

[bkspace]

Issue summary

Before opening this issue, I have:

• Upgraded to the latest version of the relevant packages
  • @shopify/* package and version:
  • Node version: 22.2.0 / 20.4.0
  • Operating system: Mac OS
• Set { logger: { level: LogSeverity.Debug } } in my configuration, when applicable
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

Deployment to Cloudflare Pages fails when compiling worker with:

Expected ";" but found "with" -> /node_modules/@shopify/shopify-app-remix/dist/esm/react/components/AppProvider/AppProvider.mjs:3:59:

Expected behavior

Deployment of a Shopify application to Cloudflare pages should succeed.

Actual behavior

What actually happens?

Steps to reproduce the problem

In order to get this package to deploy to cloudflare:

1.) Refactor shopify.server.ts to use cloudflare ctx instead of process.env to get environment variables.
2.) Swap out @remix-run/node for @remix-run/cloudflare
3.) Update entry.server.tsx to be compatible with cloudflare (If I remember correctly
4.) use cloudflareDevProxyVitePlugin as remixCloudflareDevProxy in vite.config.ts
5.) A couple of other small tweaks

I'm happy to setup as base level repository if that would make life simpler.

1. npx wrangler pages deploy --project-name=foo /build/client

As a temporary fix, we are using the CJS export of AppProvider (i.e const { AppProvider} = require("@shopify/shopify-app-remix/react");

^ this does not actually work.

Have also posted this in the CF discord to get opinions on where the issue may lie :)

Debug logs

[bkspace]

This issue exists because of the version of esbuild (0.17.19 - May 2023) used by wrangler. Support for import attributes in esbuild is introduced in 0.20.x. The next major version of wrangler will only support 0.18.x afaik, i.e it still won't support import attributes.

@paulomarg - this is not a shopify-app-js issue so this should be closed. It would be great to get your input into how we should best proceed. Is the best approach here to use the CJS export until wrangler supports a more modern version of esbuild?

[VeeGLZ]

Same problem here - I am not deploying on cloudflare but local test development

[OlivierNguyen]

Also same issue on local test development.

@bkspace If I've understand your explaination, it does not work well just because the last version of @shopify/app (3.58.2) still uses esbuild 0.19.8?

[devil1991]

@bkspace Maybe Try overriding the version by adding to your package.json

"resolutions": {
"esbuild": "0.21.5"
},
"overrides": {
"esbuild": "0.21.5"
},

Then re-generate the package lock file and deploy, that did the trick for me

[bkspace]

@OlivierNguyen - specifically wrangler uses 0.17.x of esbuild - so wrangler dev and wrangler deploy will fail with this error.

@devil1991 - Nice! We didn't go down that path because there are issues with upgrading wrangler to newer esbuild (have been following their attempts/issues). If it works, it works, but for the time being we're happy with just patching out the with { type: 'json' }!

[github-actions]

We're labeling this issue as stale because there hasn't been any activity on it for 60 days. While the issue will stay open and we hope to resolve it, this helps us prioritize community requests.

You can add a comment to remove the label if it's still relevant, and we can re-evaluate it.