ERR_REQUIRE_ESM when using @livestore/devtools-expo with Expo and monorepo

[AlvSovereign]

When using @livestore/devtools-expo in an Expo project within a monorepo setup, I encounter ERR_REQUIRE_ESM errors. This is because @livestore/devtools-expo/dist/metro-config.cjs attempts to require() ES modules like @livestore/utils/effect and @livestore/utils/node.

Error Messages:

1. Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/your/project/node_modules/@livestore/utils/dist/effect/index.js from /path/to/your/project/node_modules/@livestore/devtools-expo/dist/metro-config.cjs not supported.
2. Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/your/project/node_modules/@livestore/utils/dist/node/mod.js from /path/to/your/project/node_modules/@livestore/devtools-expo/dist/metro-config.cjs not supported.

Environment:

• expo: (Please fill in your Expo SDK version)
• @livestore/devtools-expo: (Please fill in the version you are using)
• Node.js version: (Please fill in your Node.js version)
• Monorepo setup (e.g., pnpm workspaces, yarn workspaces)

Cause:
The file node_modules/@livestore/devtools-expo/dist/metro-config.cjs is a CommonJS module. It uses require() to import dependencies. However, @livestore/utils/effect and @livestore/utils/node are ES Modules. CommonJS modules cannot require() ES Modules directly.

Fix Applied (Workaround):
The issue can be resolved by modifying node_modules/@livestore/devtools-expo/dist/metro-config.cjs to use dynamic import() for the ES Module dependencies.

Specifically, the following changes were made:

// node_modules/@livestore/devtools-expo/dist/metro-config.cjs
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
-const { Effect, Logger, LogLevel } = require('@livestore/utils/effect');
 // eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
const { PlatformNode } = require('@livestore/utils/node');
 /**
  * Patches the Metro config to add a middleware via `config.server.enhanceMiddleware`.
  */
-const addLiveStoreDevtoolsMiddleware = (config, options) => {
+const addLiveStoreDevtoolsMiddleware = async (config, options) => {
     // NOTE in CI we want to skip this
     if (process.env.CI || !process.stdout.isTTY) {
         return;
     }
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
+    const { Effect, Logger, LogLevel } = await import('@livestore/utils/effect');
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, unicorn/prefer-module, @typescript-eslint/consistent-type-imports, prettier/prettier
+    const { PlatformNode } = await import('@livestore/utils/node'); // Changed to dynamic import
     const host = options.host ?? '0.0.0.0'; // Defaulting to a hostname that can be reached from the device
     const port = options.port ?? 4242;
     // Needed for @livestore/adapter-expo

Additional Context (if applicable):
I also encountered an issue where my project's metro.config.js was being treated as an ES module due to "type": "module" in the nearest package.json. This caused a similar ERR_REQUIRE_ESM when import-fresh tried to require() it.
This was resolved by renaming metro.config.js to metro.config.cjs.

Request:
Could the @livestore/devtools-expo package be updated to correctly handle ES Module dependencies, perhaps by using dynamic imports internally or by adjusting its build process?

Thank you!

[schickling]

Can you please verify you're using Node.js 23 or newer?

[AlvSovereign]

All working now.