How do I debug package problems with Skypack?

[tylerbutler]

Caveat: I'm not sure this is a problem with Skypack. I think it's much more likely that we have a problem with our packages. But I'm not sure where to start debugging so I'm hoping you can help.

I'm trying to use some of the Fluid Framework packages in Deno, and Skypack seems to be a great fit. We publish ESModules for all of our packages, everything is in TypeScript, and everything can run in a browser. We do have shared code between client and server but we have isomorphic wrappers where needed.

That said, we do have some dependencies on node libraries that are polyfilled in Deno, like events, and we have dev dependencies that use Node APIs. It's one of those dev dependencies that seems to be causing issues.

For example, when I use these two Skypack URLs:

https://cdn.skypack.dev/@fluidframework/aqueduct@^0.35.7-20343?min
https://cdn.skypack.dev/@fluidframework/map@^0.35.7-20343?min

When I run in Deno, I get the following error:

error: Uncaught Error: [Package Error] "punycode" does not exist. (Imported by "@fluidframework/driver-utils").
throw new Error("[Package Error] \"punycode\" does not exist. (Imported by \"@fluidframework/driver-utils\").");
      ^
    at https://cdn.skypack.dev/error/node:punycode?from=@fluidframework/driver-utils:14:7

The @fluidframework/driver-utils package does not directly depend on punycode, but according to npm explain punycode, it's a leaf dependency coming from dev packages:

punycode@2.1.1 dev
node_modules/punycode
  punycode@"^2.1.0" from uri-js@4.4.1
  node_modules/uri-js
    uri-js@"^4.2.2" from ajv@6.12.6
    node_modules/ajv
      ajv@"^6.12.4" from @eslint/eslintrc@0.3.0
      node_modules/@eslint/eslintrc
        @eslint/eslintrc@"^0.3.0" from eslint@7.18.0
        node_modules/eslint
          dev eslint@"~7.18.0" from the root project
          peer eslint@">=7.5.0" from @babel/eslint-parser@7.13.10
          node_modules/@babel/eslint-parser
            @babel/eslint-parser@"^7.12.16" from eslint-template-visitor@2.3.2
            node_modules/eslint-template-visitor
              eslint-template-visitor@"^2.2.2" from eslint-plugin-unicorn@26.0.1
              node_modules/eslint-plugin-unicorn
                dev eslint-plugin-unicorn@"~26.0.1" from the root project
                eslint-plugin-unicorn@"~26.0.1" from @fluidframework/eslint-config-fluid@0.23.0
                node_modules/@fluidframework/eslint-config-fluid
                  dev @fluidframework/eslint-config-fluid@"^0.23.0" from the root project

Is there a way to get Skypack to ignore dev dependencies, or is that on the Deno side (in which case the question probably doesn't make sense)?

I've tried other packages and combinations while experimenting, which yielded this different error message:

[Package Error] "@fluid-experimental/data-objects@v0.36.2-20364" could not be built. 
[1/5] Verifying package is valid…
[2/5] Installing dependencies from npm…
[3/5] Building package using esinstall…
Running esinstall...
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
[4/5] Uploading contents to storage…
[5/5] Build complete!
error: Uncaught Error: [Package Error] "@fluid-experimental/data-objects@v0.36.2-20364" could not be built. 
throw new Error("[Package Error] \"@fluid-experimental/data-objects@v0.36.2-20364\" could not be built. ");
      ^
    at https://cdn.skypack.dev/error/build:@fluid-experimental/data-objects@v0.36.2-20364-jiTPNpsVxQVzHzzEuOaY:19:7

Is there a way to get more info on what exactly isn't getting built and why? Can I try to repro locally? Again, I'm sure this is a problem with our packages, but I don't know how to go about fixing them.

[tylerbutler]

@SamBroner FYI.

[Jackbennett]

Just to add when using deno import * as jira from "https://cdn.skypack.dev/jira.js@v2.14.0"; also explodes on the same punycode package with ;

deno run --allow-net --allow-env ./src/main.ts 
Check file:///home/jack.bennett/TargetJIRA/src/main.ts
error: Uncaught Error: [Package Error] "punycode" does not exist. (Imported by "atlassian-jwt").
throw new Error("[Package Error] \"punycode\" does not exist. (Imported by \"atlassian-jwt\").");
      ^
    at https://cdn.skypack.dev/error/node:punycode?from=atlassian-jwt:14:7

punycode is in deno/std/node so I tried an import-map but same error

{
    "imports": {
        "punycode": "https://deno.land/std@0.140.0/node/punycode.ts"
    }
}
deno run --allow-net --allow-env --import-map ./import_map.json ./src/main.ts 
error: Uncaught Error: [Package Error] "punycode" does not exist. (Imported by "atlassian-jwt").
throw new Error("[Package Error] \"punycode\" does not exist. (Imported by \"atlassian-jwt\").");
      ^
    at https://cdn.skypack.dev/error/node:punycode?from=atlassian-jwt:14:7

[myarcana]

I have the same issue right now with node-html-to-image

import * as nodeHtmlToImage from "https://cdn.skypack.dev/node-html-to-image";

nodeHtmlToImage({
  output: './image.png',
  html: '<html><body>Hello world!</body></html>'
})
  .then(() => console.log('The image was created successfully!'))

error: Uncaught Error: [Package Error] "punycode" does not exist. (Imported by "puppeteer-cluster").
throw new Error("[Package Error] \"punycode\" does not exist. (Imported by \"puppeteer-cluster\").");
      ^
    at https://cdn.skypack.dev/error/node:punycode?from=puppeteer-cluster:14:7

[chelbergeac]

Feb 2024 and I'm still finding this issue, trying to load fluid-framework from Skypack. Here's another twist: if I search for punycode on the Skypack home page I get a server error ("This serverless function has crashed"). But if I Google "skypack punycode", I get a hit! https://www.skypack.dev/view/punycode

So is this some kind of dependency cache corruption, or is the package really missing? How can we use packages with this dependency?