Clinic does not work with CJS modules: generates incomplete report

valeneiko commented 1 year ago

Summary

If I install clinic as a project dependency for a CJS project, or use pnpm exec from inside a CJS project to run it, clinic fails to generate report with no obvious error. It fails to build CSS styles, because it tries to load ESM version of d3-color (from their src folder instead of dist), which results in an invalid syntax error that is never surfaced. Instead clinic just exits with an incomplete report and undefined log in the console.

Expected Behavior

Clinic correctly generates report (by loading appropriate version of the library depending of the environment), or prints an error explaining how to fix it: installing clinic globally and invoking it directly.

Current Behavior

Process encounters an error, prints undefined to console and exits. The generated HTML report is cut at the opening <style> tag, like shown below (this is the entire contents of the file):

  <!DOCTYPE html>
  <html lang="en" class="">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAHYgAAB2IBOHqZ2wAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKGSURBVFiFzZdNSBRhGMd/zzhGRtoHHfQchLqIlIeoYwqV3TI36BB0CrxZufSBFVHYIcGrl05JuNmpEIT0EkUURth+HOwitWlZZku5u7XO22EY1J1xZ3aclX6wh/eZd5//H/7v7ryP4AMVDTUC14FjgALGgFsSjidK7SUlCu9G1A2UdAF6wWMDGEKvuCQnp74GakANtlSyK3sOuAPscdm+iOIu1bkBaf+Q27ABNdzQhmgDQMiL2VVMI+qadCYe+TKgRprqMVQ/qPYShQuZQJNuORWb8mTAJWe/mOcjLz1yJvbF0YCZc64L1E1gZ0DChfxCST/V2T7rfAiAGmkMYcgwpefslzgQlnA8IepxQx3L2lugdpPELeaoMA5o5LVIYOLNEeiMwZEHXnbXYmg9OsKhQMQBPo6C8QcW3nvbrzisAzsCM7AQMz/eqdGBKnt5L7Q+BH0bGHl4dRFS4+7tmiOw7+zKOjsPo8dhObveN6qcDfz+BMlBqKwBIwffHf9D7FgRWL/upc/FxAGqREVDaaDam0LgpN0jcGLmCby+Yq/7jMDO6gicmHvuXLdFkHKLgP8igozNgFsEFsqAN1dh5qm5LozAYnoI3vU5dchYBtbiFoGF8RfmJ1fWhRGYLiE1sV6HjKhoKAnUF1cqG0kd+Gkre43AK+tHkNYRXqI4uKbsNQJPFI3ghfU6ngTqAlArBfN1LB3JWaAN85KwWcSBVulIzmoAEo4n+LF1P3Ae+FZG4UUUl9mea7GGmM29lDoMLS7XcuMecGKD4uNocsHztdxmpMyDiebWRU4nn5V4Pqycm9zEwddwSgRFN7Cl4HEeuI9e0Rv4cOpgpBFFL8JRQCGMobjtZzz/B7bGC79/U0QUAAAAAElFTkSuQmCC">
      <title>Clinic Flame</title>
      <style>

Steps to Reproduce (for bugs)

Install clinic locally into a CJS project: pnpm i -D clinic
Run clinic flame: pnpm exec clinic flame -- node ./src/index.js
Wait for clinic to generate report and exit
Observe the undefined log in console and an incomplete HTML report

Environment

Clinic.js version: v12.1.0
Doctor version: v10.1.0
Node.js version: v18.13.0
npm version: 9.6.2
pnpm version: 7.30.3
Operating system and version: Debian bullseye

RafaelGSS commented 1 year ago

What's the content of index.js?

valeneiko commented 1 year ago

Dosn't really matter. Just a simple hello world reproduces the issue.

"use strict";
function main() {
    console.log('Hello, World!');
}
void main();

RafaelGSS commented 1 year ago

I couldn't reproduce it locally. You are gettingundefined because you have a typo and index/js doesn't exist.

- Run clinic flame: pnpm exec clinic flame -- node ./src/index/js
+ Run clinic flame: pnpm exec clinic flame -- node ./src/index.js

valeneiko commented 1 year ago

The typo was only in the GitHub issue, not the command I was running. Sorry about that. I will create a repo to reproduce it later today.

valeneiko commented 1 year ago

Here is the repo that reproduces the issue: https://github.com/valeneiko/clinic-bug

I couldn't reproduce the issue initially either, but pnpm audit --fix, made it fail like described. I think it's the fact that d3-color gets updated to a more recent version.

RafaelGSS commented 1 year ago

I'm not a pnpm user so I don't know exactly what's going on. However, I couldn't reproduce it with npm, I assume pnpm is loading the clinic outside of node_modules/.bin/clinic.

valeneiko commented 1 year ago

I added equivalent npm lockfile, it is now reproducible with npm too: https://github.com/valeneiko/clinic-bug

arimus commented 1 week ago

So I ran into this same issue. It's worth mentioning that using pnpm / pnpx for everything is necessary in a pnpm project. My guess is that clinic is having issues resolving pnpm node_modules structure (symlinks) when npm / npx is used. Running it raw without pnpx also fails FYI.

Does not work:

pnpm run build && npx clinic flame -- node dist/test.js

Does work:

pnpm run build && pnpx clinic flame -- node dist/test.js

I would recommend detected a pnpm project and print a warning under these conditions.

clinicjs / node-clinic