Not working with recent Remix starters (create-remix@latest / ESM)

[jrr]

Describe the bug

When you create-remix a fresh app, it now comes with "type": "module". (templates: default vite, legacy remix)

When you attempt to integrate remix-electron (readme "Adding to an existing Remix project"), it results in an error like this:

pnpm electron desktop/index.js
App threw an error during load
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/path/to/remix-electron-issue/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/jrr/work/remix-electron-issue/remix-electron-issue/desktop/index.js:2:23
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)

Minimal Reproduction

https://github.com/jrr/remix-electron-issue

Steps to Reproduce the Bug or Issue

1. Clone the repo
2. pnpm i
3. pnpm build
4. pnpm electron desktop/index.js

Or, alternatively, from scratch:

1. pnpx create-remix@latest
2. pnpm add remix-electron electron
3. add desktop/index.js from the readme
4. pnpm build
5. pnpm electron desktop/index.js

Expected behavior

I expected the electron app to pop up.

Screenshots or Videos

No response

Platform

• OS: macOS

Additional context

Here are some things I tried:

1. Convert index.js to ESM

Change require -> import, and workaround __dirname like this. (this is on branch esm-electron-entrypoint of the repro repo)

New error:

pnpm electron desktop/index.js
TypeError: __require.resolve is not a function
    at initRemix (file:///Users/jrr/work/remix-electron-issue/node_modules/.pnpm/remix-electron@2.0.2_@remix-run+node@2.8.1_electron@29.1.1/node_modules/remix-electron/dist/index.mjs:57:71)
    at App.<anonymous> (file:///Users/jrr/work/remix-electron-issue/desktop/index.js:14:23)
    at App.emit (node:events:514:28)

Skimming the source, I think this is the line it's choking on:

remix-electron/workspaces/remix-electron/src/index.mts

Line 47 in 5b6905c

? require.resolve(serverBuildOption)

2. Rename index.js -> index.cjs

New error:

pnpm electron desktop/index.cjs
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jrr/work/remix-electron-issue/build/index.js from /Users/jrr/work/remix-electron-issue/node_modules/.pnpm/remix-electron@2.0.2_@remix-run+node@2.8.1_electron@29.1.1/node_modules/remix-electron/dist/index.js not supported.
Instead change the require of /Users/jrr/work/remix-electron-issue/build/index.js in /Users/jrr/work/remix-electron-issue/node_modules/.pnpm/remix-electron@2.0.2_@remix-run+node@2.8.1_electron@29.1.1/node_modules/remix-electron/dist/index.js to a dynamic import() which is available in all CommonJS modules.
    at c._load (node:electron/js2c/node_init:2:13672)
    at initRemix (/Users/jrr/work/remix-electron-issue/node_modules/.pnpm/remix-electron@2.0.2_@remix-run+node@2.8.1_electron@29.1.1/node_modules/remix-electron/dist/index.js:86:5)
    at App.<anonymous> (/Users/jrr/work/remix-electron-issue/desktop/index.cjs:11:21)
    at App.emit (node:events:514:28) {
  code: 'ERR_REQUIRE_ESM'
}

---

So I expect remix-electron will need to make some changes to properly support ESM, but in the meantime it may also be helpful to offer some guidance about workarounds. Can a new remix project be configured to produce CJS output compatible with remix-electron?

Update: for anyone else in this situation, if you want to try reverting from ESM back down to CJS, here's an example diff applied to the default Remix starter: jrr/remix-electron-issue#1