RR7 and CommonJS Dependency

[JLinkous15]

OS: Windows 11
IDE: VSCode
Node v22.9.0

Scenario:
Upgraded to React-Router v7 (Remix) with Cloudflare template, using @hiogawa/vite-node-miniflare. Installing Material UI, which uses CommonJS syntax under the hood, leads to the following error:

1:22:15 PM [vite] Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
ReferenceError: require is not defined
    at /home/User/workspace/ww-csearch/ui/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:3:15
    at Object.runViteModule (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1320:15)
    at ViteRuntime.directRequest (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1231:78)
    at ViteRuntime.cachedRequest (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1154:28)
    at request (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1181:128)
    at /node_modules/@emotion/react/_isolated-hnrs/dist/emotion-react-_isolated-hnrs.development.edge-light.esm.js?v=38c62a9c:1:110
    at Object.runViteModule (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1320:9)
    at ViteRuntime.directRequest (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1231:60)
    at ViteRuntime.cachedRequest (home/User/workspace/ww-csearch/ui/node_modules/@hiogawa/vite-node-miniflare/dist/worker-entry.js:1155:79)
    at /node_modules/@emotion/react/dist/emotion-element-516430c7.development.edge-light.esm.js?v=38c62a9c:6:31

Context

• Build script is successful
• Typegen script is successful
• Dev script is successful
• Error thrown only when browser is opened (tested in Chrome, Firefox, Edge).

I can't tell if this is a bug or a config that I'm missing.

[patdx]

I had the same issue with a different commonjs dependency, it seems like that Vite plugin is using the new Vite Environments API. Maybe it is not totally stable yet.

I decided to go back to something closer to the Cloudflare Dev Proxy style recommended in Remix for now.

You can refer to this official Remix Cloudflare template. Note that in React Router 7, the dev proxy is still available, at a different import path:

import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";

However, I like the structure of this RR7 template more, especially having the real Cloudflare Worker entrypoint fully exposed.

While it's more opinionated, I've also updated my own personal template to have a similar workers/app.ts entrypoint, but using the Wrangler Proxy mode like Remix did, so it should be able to handle Node dependencies more smoothly. It is also for Cloudflare Pages, not the new Wrangler Assets mode.