cdn problem: fetching a library with a leading "@" in its name

[rwv37]

I've been using vite-plugin-monkey successfully for a while now, but haven't tried the built-in CDN stuff until today. I made a little proof-of-concept version using jsdelivr's version of the library cowsay, and it worked fine. So then I changed it to add it the other libraries my userscript uses:

externalGlobals: {
  cowsay: cdn.jsdelivr('cowsay'),
  '@js-joda/core': cdn.jsdelivr('@js-joda/core'),
  'reflect-metadata': cdn.jsdelivr('reflect-metadata'),
  tslog: cdn.jsdelivr('tslog'),
  tsyringe: cdn.jsdelivr('tsyringe'),
},

Unfortunately, the @js-joda/core line makes the build fail with an error:

dist/vestertopian_dtrpg_helper_outer.user.js
[error] dist/vestertopian_dtrpg_helper_outer.user.js: SyntaxError: Leading decorators must be attached to a class declaration. (3246:50)
[error]   3244 |   Deprecating_Main();
[error]   3245 |
[error] > 3246 | })(reflect-metadata, cowsay, tsyringe, tslog, @js-joda/core);

I'm pretty new to "real" Javascript development (I've used JS for ages, but only occasionally, and only for little things), so I'm sorry, but I'm not sure if this sort of problem has a standard solution or not. Also, I think I should note that all my code (including where the externalGlobals is defined is actually in Typescript, so the SyntaxError (which is happening on a *.js file) must be happening after the TypeScript is transpiled to Javascript.

Any help would be appreciated. Thank you!

[rwv37]

Oh, I should also say that I tried installing the generated JS userscript despite the build error, but it just throws an error at runtime:

15:13:18.099 Could not execute [Greasemonkey script https://vesterman.com/Greasemonkey/Scripts/DTRPGHelperOuter/Vestertopian DTRPG Helper Outer; version 1.0.0-pre-249] 
 illegal character U+0040 execute.js:29:15
    executeUserscriptOnNavigation moz-extension://94093c73-9d9b-4fdb-ad67-b29701f1e108/src/bg/execute.js:29

The U+0040 is of course "@".

[rwv37]

I suspect there's a similar issue with the other one whose name goes in quotes in the externalGlobals definition, 'reflect-metadata': Here's the generated Javascript's main function definition and its invocation of that function, with everything in the function itself omitted:

(function (reflectMetadata, cowsay, tsyringe, tslog, core) {
})(reflect-metadata, cowsay, tsyringe, tslog, @js-joda/core);

Intellisense tells me that the cowsay, tsyringe, and tslog parameters of the function are all of type any, but the reflectMetadata and core parameters are of type number. I assume this is due to the function call, wherein reflect-metadata and @js-joda/core are being passed as those parameters, both of which are being interpreted as number due to the seeming arithmetic symbols in them (- and /).

[lisonge]

https://github.com/lisonge/vite-plugin-monkey?tab=readme-ov-file#cdn-util-for-external

Did you check the documentation to this?

[rwv37]

I'm sorry, I don't understand what you're trying to show me. I don't use React. Are you saying that I should?

Or that I should add something like the second parameter in that call? I've been skipping it because the intellisense and documentation for it says something like "You usually don't have to use this parameter", and skipping it worked fine in my proof-of-concept test using the cowsay package. Am I misunderstanding what that "usually don't have to use this" is referring to?

Or are you trying to tell me something else entirely?

I'm sorry to be dense, but I genuinely don't understand.

[rwv37]

"* @param pathname jsdelivr support file combine, normally you don't need set pathname" is what it says.

[rwv37]

I'm just guessing here: Are you suggesting that the problem is that the userscript couldn't fetch the libraries because it wasn't told their entire pathnames?

If so, I'm pretty sure that's not the issue. I can see that the libraries get loaded in my browser when I try it (without specifying the second parameter). It seems to me like the issue is that the generated javascript does not parse correctly, because of the @ (and maybe the - too, I don't know) in (function (reflectMetadata, cowsay, tsyringe, tslog, core) { (...) })(reflect-metadata, cowsay, tsyringe, tslog, @js-joda/core); are not valid object names.

If that's not what you're suggesting, could you please elaborate on what you actually do mean? Thank you.

[lisonge]

exportVarName is its umd/iife export name

externalGlobals: {
  cowsay: cdn.jsdelivr('cowsay'),
  '@js-joda/core': cdn.jsdelivr('JSJoda'),
  'reflect-metadata': cdn.jsdelivr('Reflect').concat(util.dataUrl(';var Reflect=window.Reflect;')), // Keep the original method like Reflect.get
  tslog: cdn.jsdelivr('tslog', 'dist/browser/index.js'),
  // tsyringe: cdn.jsdelivr('tsyringe'), // not support
},