Using @aws-sdk/client-s3 with React Router V7 and Cloudflare template

[pierophp]

I'm using React Router as a...

framework

Reproduction

Using the @aws-sdk/client-s3 with the Cloudflare template.

npx create-react-router@latest --template remix-run/react-router-templates/cloudflare
npm install @aws-sdk/client-s3

Import the client:

import { S3Client } from "@aws-sdk/client-s3";
import type { Route } from "./+types/home";
import { Welcome } from "../welcome/welcome";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export function loader({ context }: Route.LoaderArgs) {
  const s3Client = new S3Client({});

  console.log({ s3Client });

  return { message: context.VALUE_FROM_CLOUDFLARE };
}

A repro repository:
https://github.com/pierophp/react-router-cloudflare-aws-sdk

System Info

System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (24) x64 AMD Ryzen AI 9 HX 370 w/ Radeon 890M
    Memory: 3.04 GB / 15.18 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.13.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.2 - /usr/local/bin/npm
    bun: 1.1.37 - ~/.bun/bin/bun
  npmPackages:
    @react-router/dev: ^7.1.1 => 7.1.1
    @react-router/node: ^7.1.1 => 7.1.1
    @react-router/serve: ^7.1.1 => 7.1.1
    react-router: ^7.1.1 => 7.1.1
    vite: ^5.4.11 => 5.4.11

Used Package Manager

npm

Expected Behavior

Import a CJS module with the Cloudflare template

The S3 Client is support by Cloudflare:
https://developers.cloudflare.com/r2/examples/aws/aws-sdk-js-v3/

Actual Behavior

Just importing the client, I got this error (I had the same problem with kysely + d1:

[vite-node-miniflare error]
ReferenceError: require is not defined
at /home/piero/dev/react-router-aws-sdk/node_modules/fast-xml-parser/src/fxp.js:3:19
at Object.runViteModule (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1320:15)
at ViteRuntime.directRequest (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1231:78)
at ViteRuntime.cachedRequest (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1154:28)
at request (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1181:128)
at /node_modules/@aws-sdk/core/dist-es/submodules/protocols/xml/parseXmlBody.js?v=7d5560d3:2:31
at Object.runViteModule (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1320:9)
at ViteRuntime.directRequest (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1231:60)
at ViteRuntime.cachedRequest (home/piero/dev/react-router-aws-sdk/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1155:79)
at /node_modules/@aws-sdk/core/dist-es/submodules/protocols/index.js?v=7d5560d3:10:31

[timdorr]

This isn't a bug with the library. Those dependencies down the chain are CJS modules and aren't getting transpiled by Vite for some reason. This isn't related to the library.

I would try adding this to your vite.config.ts:

build: {
  commonjsOptions: { transformMixedEsModules: true }
}

[pierophp]

@timdorr transformMixedEsModules didn't work.

The funny part is that, it doesn't happen with the default template, just with the Cloudflare one. Shouldn't that be a default behavior of the Cloudflare template?

[pierophp]

BTW, It works with Remix + Cloudflare, I'm having this issue trying to upgrade to React Router. That's why I think It's a problem with React Router.

[pierophp]

I've found a open PR that addresses my issue. Referencing it:

remix-run/react-router-templates#44