remix: Broken polyfill on Cloudflare Pages after `1.17.1` upgrade

What version of Remix are you using?

1.17.1

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

Clone repository https://github.com/aaronadamsCA/remix-issue-node-polyfills.
Run remix dev or deploy to Cloudflare Pages.

Expected Behavior

Works the same as v1.17.0.

Actual Behavior

When I use library sanitize-html, this results in the inclusion of polyfill "node-modules-polyfills-commonjs:tty", which crashes the Cloudflare Workers runtime.

Local dev using Wrangler v2.20.0

First a warning:

▲ [WARNING] Duplicate key "constants" in object literal [duplicate-object-key]

    functions/[[path]].js:30122:6:
      30122 │       constants,
            ╵       ~~~~~~~~~

  The original key "constants" is here:

    functions/[[path]].js:30121:6:
      30121 │       constants: { F_OK, R_OK, W_OK, X_OK },
            ╵       ~~~~~~~~~

Then an error:

/workspaces/remix-issue-6665/functions/[[path]].js:17285
        module.exports[k4] = polyfill[k4];
                       ^
TypeError: Cannot assign to read only property 'ReadStream' of object '[object Object]'
    at node-modules-polyfills-commonjs:tty (/workspaces/remix-issue-6665/functions/[[path]].js:17285:24)
    at /workspaces/remix-issue-6665/functions/[[path]].js:10:46
    at node_modules/picocolors/picocolors.js (/workspaces/remix-issue-6665/functions/[[path]].js:17295:15)
    at /workspaces/remix-issue-6665/functions/[[path]].js:10:46
    at node_modules/postcss/lib/css-syntax-error.js (/workspaces/remix-issue-6665/functions/[[path]].js:17510:16)
    at /workspaces/remix-issue-6665/functions/[[path]].js:10:46
    at node_modules/postcss/lib/postcss.js (/workspaces/remix-issue-6665/functions/[[path]].js:31823:26)
    at /workspaces/remix-issue-6665/functions/[[path]].js:10:46
    at node_modules/sanitize-html/index.js (/workspaces/remix-issue-6665/functions/[[path]].js:31882:229)
    at /workspaces/remix-issue-6665/functions/[[path]].js:10:46

Deploying to Cloudflare Pages results in "this deployment failed" with no details

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 27 (21 by maintainers)

Most upvoted comments

You’re right, I should import it from "@remix-run/cloudflare" 🤦 That works, thanks for the tip.

acidio on Jun 22, 2023

Our smaller app still worked post-upgrade despite including import { json } from "@remix-run/cloudflare". You may wish to try importing from "@remix-run/cloudflare" if you’re developing for Cloudflare.

On my side, if nobody else chimes in with more info, I’ll try to figure out the minimal reproduction.

aaronadamsCA on Jun 22, 2023

You’ll need to add the Buffer constructor it to the global environment somewhere at the root of your app:

import { Buffer } from 'buffer';
globalThis.Buffer = Buffer;

Note that this won’t work if you’ve set the buffer polyfill to "empty", like in your config snippet.

markdalgleish on Jul 19, 2023

I’ve raised a couple of PRs against esbuild-plugins-node-modules-polyfill to address this issue.

markdalgleish on Jun 26, 2023

@aaronadamsCA I followed your reproduction steps and I’m not seeing the local dev issue you described. Could you share a minimal repro?

markdalgleish on Jun 23, 2023