remix: remix-serve is incompatible with serverModuleFormat:esm

Same issue here on 1.16.0. Setting serverModuleFormat to esm, I receive:

GET / 500 - - 1.453 ms
/Users/<USERNAME>/source/hahaha/main/app/api/index.js:12
import { PassThrough } from "stream";
^^^^^^

SyntaxError: Cannot use import statement outside a module
     at Object.compileFunction (node:vm:360:18)
     at wrapSafe (node:internal/modules/cjs/loader:1119:15)
     at Module._compile (node:internal/modules/cjs/loader:1155:27)
     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1245:10)
     at Module.load (node:internal/modules/cjs/loader:1069:32)
     at Function.Module._load (node:internal/modules/cjs/loader:904:12)
     at Module.require (node:internal/modules/cjs/loader:1093:19)
     at require (node:internal/modules/cjs/helpers:108:18)
     at /Users/<USERNAME>/source/hahaha/node_modules/.pnpm/@remix-run+serve@1.16.0/node_modules/@remix-run/serve/dist/index.js:43:17
     at Layer.handle [as handle_request] (/Users/<USERNAME>/source/hahaha/node_modules/.pnpm/express@4.18.2/node_modules/express/lib/router/layer.js:95:5)

Hey folks! We probably could have communicated this a bit better but at the moment these errors will depend on the server you’re using. I’m going to keep this issue open for tracking @remix-run/serve compatibility with ESM as we prep for v2.

Remix App Server

@remix-run/serve is not compatible with serverModuleFormat: "esm" in v1 because that would be a breaking change. Once v2 is released, it will be compatible with serverModuleFormat: "esm".

For now, if you are using @remix-run/serve you should set serverModuleFormat: "cjs" in your remix.config.js to explicitly indicate your app setting which will silence the warning and ensure your app is able to upgrade to v2 without issues.

Express Template

If folks are running into issues with the express template, these should be the steps you need to follow to convert a CJS express app to an ESM express app:

• Change to serverModuleFormat: "esm" in remix.config.js
• Add type:"module" to your package.json
• Change your Express server to be an ESM module (i.e., using import instead of require)
  • Please note that the purgeRequireCache implementation in the default express template relies on CJS so you won’t be able to use that functionality and your server will not receive updates without a restart
  • You can work around this by leveraging node --watch or nodemon to auto-restart on changes.
• Change your remix.config.js to be an ESM module (i.e., export default instead of module.exports)
• Rename .eslintrc.js -> .eslintrc.cjs because ESLint doesn’t support an ESM config file

v2 Express Template

You can also create a brand new Remix app with Express + ESM using our eventual v2 template for Express via the following:

npx create-remix --template https://github.com/remix-run/remix/tree/templates_v2_dev/templates/express

Can also confirm this seems broken. If you add type: module to the package.json and converting remix.config,js to ES module doesn’t work either as @remix-run/serve uses require() to get the build.

The same for me with Remix 1.16.1 anyone was able to find a fix for this?

Only fix I could find was changing serverModuleFormat back to cjs in remix config

@jacob-ebey just tried upgrading all my @remix-run/* dependencies to the nightly tag. However, I’m still seeing the [ERR_REQUIRE_ESM] issue 😕.

Add it to your server dependencies: https://remix.run/docs/en/1.16.1/pages/gotchas#importing-esm-packages

That branch has been merged to dev, you can now run

npx create-remix --template https://github.com/remix-run/remix/tree/dev/templates/express

You may also need to install @remix-run/serve as a devDependency in the created app.