`Error [ERR_REQUIRE_ESM]: require() of ES Module`

[cliffordfajardo]

Describe the bug

After upgrading from remix-kit 0.1.0 to 0.1.2 in #2 , the next thing I did was run npm run dev When attempting to setup remix-kit on a new remix express template following the getting started guide, I get the following message when running npm run dev.

RemixKit 0.1.2                                                                03:44:55
Remix 1.9.0                                                                   03:44:55
React 18.2.0                                                                  03:44:55
                                                                              03:44:55
  > Local:    http://localhost:3005/ 
  > Network:  http://192.168.1.65:3005/
  > Network:  http://[2600:1700:7274:8990:1c8c:1998:2c3:deda]:3005/
  > Network:  http://[2600:1700:7274:8990::d]:3005/
  > Network:  http://[2600:1700:7274:8990:c1f5:a550:76ab:5524]:3005/
  > Network:  http://[2600:1700:7274:8990:d9c5:e776:d564:418b]:3005/
  > Network:  http://[2600:1700:7274:8990:ec99:3d87:7099:3b45]:3005/

ℹ Cleaning up generated files and caches...                                   03:44:55
✔ Dev server ready in 767.138ms                                               03:44:55

ℹ Starting Remix server... node ./server.js                                   03:44:55

Express server starting...                                                    03:44:55
Express server listening on port 3000                                         03:44:55
                                                                              03:44:55
ℹ Runner started on http://localhost:3000                                     03:44:55
✔ Remix server ready in 166.13ms                                              03:44:55

ℹ Document request (/)                                                        03:44:57
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/@remix-kit/react/dist/index.mjs not supported.
Instead change the require of /Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/@remix-kit/react/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at /Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:329:121
    at async ViteNodeRunner.interopedImport (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:329:17)
    at async ViteNodeRunner.directRequest (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:237:24)
    at async ViteNodeRunner.cachedRequest (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:173:14)
    at async request (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:199:16)
    at async /Users/cliffordfajardo/repos/remix_kit_repro1/app/root.tsx:5:31
    at async ViteNodeRunner.directRequest (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:312:5)
    at async ViteNodeRunner.cachedRequest (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:173:14)
    at async request (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:199:16)
    at async /Users/cliffordfajardo/repos/remix_kit_repro1/@remix-run/dev/server-build:3:37
    at async ViteNodeRunner.directRequest (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:312:5)
    at async ViteNodeRunner.cachedRequest (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:173:14)
    at async request (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/vite-node/dist/client.cjs:199:16)
    at async RemixKitRunner.executor (/Users/cliffordfajardo/repos/remix_kit_repro1/node_modules/@remix-kit/vite/dist/runtime/dev-entry.mjs:4:13) {
  code: 'ERR_REQUIRE_ESM'
}
ℹ Document request (/favicon.ico)                                             03:44:57

What to Expect as a User

As a user wanting to use remix-kit, I expect few changes to be able to get my existing remix project running For example, changing scripts in package json and the server.js file (entry point)

Reproduction

https://github.com/cliffordfajardo/remix_kit_repro1

Steps to reproduce

1.Start a new remix express project

$ npx create-remix@latest
? Where would you like to create your app? ./my_remix-kit-example
What type of app do you want to create? (Use arrow keys)
❯ Just the basics
A pre-configured stack ready for production
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets. Express
Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? (Y/n) Y
.
.
.

2. Install remix kit dependencies per the getting started guided

npm i @remix-kit/vite @remix-kit/react @remix-kit/cli

3. Start server:

yarn run dev

See my github repo and try to run it, I've upgraded to remix-kit 0.1.2

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 99.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.volta/tools/image/node/18.12.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/18.12.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.1
  npmPackages:
    @remix-kit/cli: ^0.1.2 => 0.1.2 
    @remix-kit/react: ^0.1.2 => 0.1.2 
    @remix-kit/vite: ^0.1.2 => 0.1.2 
    @remix-run/dev: ^1.9.0 => 1.9.0 
    @remix-run/eslint-config: ^1.9.0 => 1.9.0 
    @remix-run/express: ^1.9.0 => 1.9.0 
    @remix-run/node: ^1.9.0 => 1.9.0 
    @remix-run/react: ^1.9.0 => 1.9.0

Used Package Manager

npm

Validations

• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a RemixKit issue and not a Remix specific issue. For example, if it's a Remix related bug, it should likely be reported to remix instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.

Screenshots

[jrestall]

Hi @cliffordfajardo , I really appreciate the detailed bug reports! Thanks so much.

For this one, CommonJS server modules are not currently supported, please convert it to an ES Module by renaming to server.mjs and with code similar to the below. I'll update the getting started guide.

import express from "express";
import compression from "compression";
import morgan from "morgan";
import { createRequestHandler } from "@remix-run/express";
import { RemixKitRunner } from "@remix-kit/vite";

const app = express();

app.use(compression());

// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
app.disable("x-powered-by");

// Remix fingerprints its assets so we can cache forever.
app.use(
  "/build",
  express.static("public/build", { immutable: true, maxAge: "1y" })
);

// Everything else (like favicon.ico) is cached for an hour. You may want to be
// more aggressive with this caching.
app.use(express.static("public", { maxAge: "1h" }));

app.use(morgan("tiny"));

const runner = new RemixKitRunner({ mode: process.env.NODE_ENV });
app.all('*', (req, res, next) => {
  runner.execute(({ build, mode, err }) => {
    if (err) res.end(err);
    if (build) createRequestHandler({ build, mode })(req, res, next);
  });
});

console.log(`Express server starting...`);
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Express server listening on port ${port}`);
  runner.ready(`http://localhost:${port}`);
});

[jrestall]

Hi @cliffordfajardo, thanks again for the report! This should be fixed in v0.2.1 where I've made the dev server entry file commonjs. There's only a minor change required now for the express template which is to add a require(BUILD_DIR); to the server.js. which avoids the first request failing.

app.listen(port, () => {
  require(BUILD_DIR);
  console.log(`Express server listening on port ${port}`);
});

This ensures the RemixKit dev client is initialized by the time the first request comes in since we can't do top level await in commonjs.

[pigoz]

Hi I'm encountering the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module ~/dev/project/node_modules/zapatos/db.mjs not supported.
Instead change the require of ~/dev/project/node_modules/zapatos/db.mjs to a dynamic import() which is available in all CommonJS modules.

Not really sure what's going on.

Using 0.2.3

[cliffordfajardo]

hey @pigoz
what steps did you take which resulted in the error message? can you share a stackblitz example or link your code repo?

[pigoz]

hey @pigoz what steps did you take which resulted in the error message?

npx remix-kit@latest install renamed dev:node to dev:server and added the require(BUILD_DIR) to server.js

can you share a stackblitz example or link your code repo?

Unfortunately it's on a proprietary app. I'll try to come up with a repro.