Production Build Fails to Import Module - ESM/CJS conflict

age2pierre commented 2 weeks ago

Bug Report

Steps to Reproduce:

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

Install dependencies:

nvm use
npm install -g pnpm
pnpm install

Start the server in development mode:
```
pnpm run dev
```
Visit http://localhost:3000/ and click the "Generate" button. The request succeeds with a 200 status.
Now build and start the server in production mode:
```
pnpm run clean
pnpm run build
pnpm run serve
```
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 commented 2 weeks ago

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 commented 2 weeks ago

:+1: No worries. (FYI in case your company is up for it we're looking for sponsors (https://github.com/vikejs/vike/issues/1350).)

brillout / telefunc