Production Build Fails to Import Module - ESM/CJS conflict

[age2pierre]

Bug Report

Steps to Reproduce:

Repo/branch to clone https://github.com/age2pierre/solid-capacitor/tree/bug/vite-func

1. Install dependencies:

   nvm use
   npm install -g pnpm
   pnpm install

2. Start the server in development mode:

   pnpm run dev

3. Visit http://localhost:3000/ and click the "Generate" button. The request succeeds with a 200 status.

4. Now build and start the server in production mode:

   pnpm run clean
   pnpm run build
   pnpm run serve

5. Visit http://localhost:3000/ again and click the "Generate" button. This time the request fails with a 500 error.

Error:

The production server throws the following error:

file://<ROOT>/dist/server/assets/crypto.telefunc-CQMnarz-.js:3
import { R } from '@mobily/ts-belt';
         ^
SyntaxError: Named export 'R' not found. The requested module '@mobily/ts-belt' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@mobily/ts-belt';
const { R } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async <ROOT>/node_modules/.pnpm/telefunc@0.1.78_@babel+core@7.24.5_@babel+parser@7.24.5_@babel+types@7.24.5/node_modules/telefunc/dist/cjs/node/vite/loadTelefuncFilesWithVite.js:66:82
    at async Promise.all (index 0)
    at async loadGlobFiles (<ROOT>/node_modules/.pnpm/telefunc@0.1.78_@babel+core@7.24.5_@babel+parser@7.24.5_@babel+types@7.24.5/node_modules/telefunc/dist/cjs/node/vite/loadTelefuncFilesWithVite.js:60:52)
    at async loadTelefuncFilesWithVite (<ROOT>/node_modules/.pnpm/telefunc@0.1.78_@babel+core@7.24.5_@babel+parser@7.24.5_@babel+types@7.24.5/node_modules/telefunc/dist/cjs/node/vite/loadTelefuncFilesWithVite.js:14:55)
    at async loadTelefuncFiles (<ROOT>/node_modules/.pnpm/telefunc@0.1.78_@babel+core@7.24.5_@babel+parser@7.24.5_@babel+types@7.24.5/node_modules/telefunc/dist/cjs/node/server/runTelefunc/loadTelefuncFiles.js:34:73)
    at async runTelefunc_ (<ROOT>/node_modules/.pnpm/telefunc@0.1.78_@babel+core@7.24.5_@babel+parser@7.24.5_@babel+types@7.24.5/node_modules/telefunc/dist/cjs/node/server/runTelefunc.js:83:59)
    at async runTelefunc (<ROOT>/node_modules/.pnpm/telefunc@0.1.78_@babel+core@7.24.5_@babel+parser@7.24.5_@babel+types@7.24.5/node_modules/telefunc/dist/cjs/node/server/runTelefunc.js:38:16)

Additional Notes:

The issue might stem from the ts-belt package.json (https://publint.dev/@mobily/ts-belt@3.13.1), but since this works fine in dev mode (using tsx which in turns uses esbuild), and with Vite also using esbuild, there might be a configuration adjustment possible in Vite/Telefunc to resolve this issue.
Also from what I can see /dist/server/entry.js is correctly loaded beforehand.

Could you assist in configuring Vite/Telefunc to handle this module issue and/or confirm/infirm it's a bug in telefunc ?

If it is out of scope for this project, I understand and don't want to abuse your time.

[age2pierre]

Ok sorry for the noise, and thanks for rubberducking, it was actually ts-belt the culprit. I've pnpm patch and solve the issue.
I'm not sure what kind of black magic tsx uses to make it work without it though.

I'll close the issue.

For reference the patch file :

diff --git a/dist/esm/index.js b/dist/esm/index.js
index d1eadb25a2e1d70725233089be960441fc977f78..974de2d32bd6f37ec3028efa62ea94354c6e6c0b 100644
--- a/dist/esm/index.js
+++ b/dist/esm/index.js
@@ -1,14 +1,14 @@
 import { pipe } from "./pipe.js";
 import { flow } from "./flow.js";
-import * as F from "./Function";
-import * as A from "./Array";
-import * as R from "./Result";
-import * as G from "./Guards";
-import * as O from "./Option";
-import * as S from "./String";
-import * as D from "./Dict";
-import * as B from "./Bool";
-import * as N from "./Number";
+import * as F from "./Function/index.js";
+import * as A from "./Array/index.js";
+import * as R from "./Result/index.js";
+import * as G from "./Guards/index.js";
+import * as O from "./Option/index.js";
+import * as S from "./String/index.js";
+import * as D from "./Dict/index.js";
+import * as B from "./Bool/index.js";
+import * as N from "./Number/index.js";
 export {
   A,
   B,
diff --git a/package.json b/package.json
index 4fa89a82342c1015463aaa825869f02b0053ac98..edb6d713df5d810aa38ed5dc4e3122c02b21dd41 100644
--- a/package.json
+++ b/package.json
@@ -2,17 +2,17 @@
   "name": "@mobily/ts-belt",
   "description": "🔧 Fast, modern, and practical utility library for FP in TypeScript.",
   "version": "3.13.1",
-  "main": "./dist/cjs/index.js",
+  "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js"
     },
     "./package.json": "./package.json"
   },
+  "type": "module",
   "sideEffects": false,
   "files": [
     "dist",

[brillout]

👍 No worries. (FYI in case your company is up for it we're looking for sponsors (vikejs/vike#1350).)