Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clinic does not work with CJS modules: generates incomplete report #447

Open
valeneiko opened this issue Mar 26, 2023 · 8 comments
Open

Clinic does not work with CJS modules: generates incomplete report #447

valeneiko opened this issue Mar 26, 2023 · 8 comments

Comments

@valeneiko
Copy link

valeneiko commented Mar 26, 2023 •
edited
Loading

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)

  1. Install clinic locally into a CJS project: pnpm i -D clinic
  2. Run clinic flame: pnpm exec clinic flame -- node ./src/index.js
  3. Wait for clinic to generate report and exit
  4. 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
Copy link
Contributor

RafaelGSS commented Mar 26, 2023 •
edited
Loading

What's the content of index.js?

@valeneiko
Copy link
Author

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

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

@RafaelGSS
Copy link
Contributor

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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

@arimus
Copy link

arimus commented Nov 13, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@arimus @valeneiko @RafaelGSS