Cloudflare + MongoDB: How to fix 'Error: Dynamic require of 'punycode/' is not supported'

Source: Dev.to

TL;DR

@cloudflare/vite-plugin processes an import with a trailing slash inside the tr46 library (a transitive dependency of the MongoDB Node.js driver). The current solution is to patch this import until a proper fix lands.

Reproduction

Create a minimal project that reproduces the problem.

# 1️⃣ Create a new React‑Router app
npm create cloudflare@latest -- my-react-router-app --framework=react-router
cd my-react-router-app

# 2️⃣ Install the MongoDB driver
npm install mongodb --save

# 3️⃣ Prepend an import to the Workers entry point
printf 'import { MongoClient } from "mongodb";\n%s' "$(cat workers/app.ts)" > workers/app.ts

# 4️⃣ Enable the Node.js compatibility flag (required for SSR)
sed -i '' '/"compatibility_date": "2025-04-04"/a\
  "compatibility_flags": ["nodejs_compat"],' wrangler.jsonc

Run the app

npm run dev

You should see something like:

11:15:07 AM [vite] (ssr) Re-optimizing dependencies because vite config has changed
11:15:08 AM [vite] (ssr) ✨ new dependencies optimized: mongodb
11:15:08 AM [vite] (ssr) ✨ optimized dependencies changed. reloading
[vite] program reload
Error: Dynamic require of "punycode/" is not supported
    at null. (/.../node_modules/.vite/deps_ssr/chunk-PLDDJCW6.js:11:9)
    …

Vite is complaining about a dynamic require of punycode/ (note the trailing slash).

Find the source

npm ls punycode

Output:

my-react-router-app@ /.../my-react-router-app
└─┬ mongodb@7.0.0
  └─┬ mongodb-connection-string-url@7.0.0
    └─┬ whatwg-url@14.2.0
      └─┬ tr46@5.1.1
        └── punycode@2.3.1

Inspect tr46’s entry point (node_modules/tr46/index.js):

"use strict";

const punycode = require("punycode/"); // ← problematic line
const regexes = require("./lib/regexes.js");
const mappingTable = require("./lib/mappingTable.json");
const { STATUS_MAPPING } = require("./lib/statusMapping.js");
// …

The trailing slash causes Vite’s bundler to treat the import as a dynamic require, which isn’t supported in the Workers runtime.

A PR was opened against tr46 (#73), but the maintainer indicated the issue originates from Vite, not the library itself. The change that introduced the slash (commit fef6e95) was meant to silence deprecation warnings for the built‑in punycode module.

Patching the Dependency

We can work around the problem with patch‑package:

1. Install patch-package

   npm install patch-package --save-dev

2. Add a postinstall script (keeps the patch applied after every install, and also runs the default cf-typegen script):

   npm pkg set scripts.postinstall="patch-package && npm run cf-typegen"

3. Edit the offending file to remove the trailing slash:

   sed -i '' 's/require("punycode\/")/require("punycode")/g' node_modules/tr46/index.js

4. Create the patch:

   npx patch-package tr46

   This generates a patches/tr46+5.1.1.patch file in your repository.

5. Commit the patch (so it travels with your codebase).

Now, whenever npm install runs, patch-package will re‑apply the fix automatically.

Full Patch Script (copy‑and‑paste)

# 1️⃣ Install patch‑package
npm install patch-package --save-dev

# 2️⃣ Add postinstall script (preserves existing cf-typegen)
npm pkg set scripts.postinstall="patch-package && npm run cf-typegen"

# 3️⃣ Fix the import in the installed package
sed -i '' 's/require("punycode\/")/require("punycode")/g' node_modules/tr46/index.js

# 4️⃣ Generate a patch file
npx patch-package tr46

After running the above steps, restart the dev server:

npm run dev

You should no longer see the “Dynamic require of “punycode/” is not supported” error, and the MongoDB driver will load correctly in your Cloudflare Worker.

What’s Next?

• Keep an eye on the upstream tr46 repository – once they release a version without the trailing slash, you can drop the patch.
• If you encounter similar issues with other libraries, the same patch-package approach can be used as a temporary fix.

Happy hacking!

The Above Change

npx patch-package tr46
# reinstall and apply patches
npm install

Summary

Patching transient dependencies to work around an issue like this isn’t ideal, but it offers a path forward for anyone hitting this specific error. To recap:

1. Install patch-package

   npm install patch-package

2. Update package.json – prepend a patch-package command to any existing postinstall scripts:

   {
     "scripts": {
       "postinstall": "patch-package && "
     }
   }

3. Modify the source – edit node_modules/tr46/index.js to remove the trailing / from require("punycode/").

4. Create the patch

   npx patch-package tr46

5. Ensure the patch is applied

   npm install

Hopefully the upstream issue will be resolved cleanly (reported as cloudflare/workers-sdk#11751), but in the meantime this approach can keep your project running.