dts-gen ReferenceError: jQuery is not defined

Question

I'm trying to generate the definition file for jquery-colorbox. I use from my project root:

dts-gen -m jquery-colorbox

which fails with:

Unexpected crash! Please log a bug with the commandline you specified.
/usr/local/lib/node_modules/dts-gen/bin/lib/run.js:130
        throw e;
        ^

ReferenceError: jQuery is not defined
    at Object.<anonymous> (/home/adr/Projects/albums/node_modules/jquery-colorbox/jquery.colorbox.js:1105:3)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/dts-gen/bin/lib/run.js:57:67)
    at Module._compile (module.js:653:30)

I do have jQuery and other required libraries installed (globally and locally). How do I "tell" dts-gen to "load" / "use" jQuery?

You may want to know that there is already a type declaration package available for `jquery-colorbox` under the name [`@types/jquery.colorbox`](https://www.npmjs.com/package/@types/jquery.colorbox). — Leonard Thieu, Oct 30 '18 at 16:58

score 3 · Accepted Answer · answered Oct 30 '18 at 16:35

The first problem is that dts-gen needs to actually load the module you specify in order to examine its structure, and jquery-colorbox expects jQuery, document, and window to be defined on the global object, which they aren't in Node.js. One possible approach (which I didn't pursue) is to use dts-gen's experimental support for browser-based generation of declarations. Another is to load a Node.js-compatible DOM implementation such as jsdom and set the necessary global variables so that you can load jquery-colorbox successfully. Specifically, if you write the following in a file named jquery-colorbox-wrapper.js (based on this answer):

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.jQuery = require('jquery')(window);
global.document = document;
global.window = window;
require("jquery-colorbox");

and then run dts-gen --expression-file jquery-colorbox-wrapper.js, it should run successfully.

Then you'll run into the second problem: the generated declaration file is empty because jquery-colorbox, as a jQuery plugin, adds things to the jQuery object and does not have exports of its own. If you change the wrapper script to return the jQuery object, then you'll get the declarations for jquery-colorbox mixed with those of jQuery itself. A reasonable approach is to diff the declaration files that you get for jQuery with and without jquery-colorbox. I.e., append global.jQuery; to the jquery-colorbox-wrapper.js file as given above, run dts-gen once, then comment out the require("jquery-colorbox"); line and run dts-gen again with a different output file, and finally diff the two files. That leaves me with the jquery-colorbox-specific declarations as well as some diffs in sizzle* variables whose names contain a timestamp, which should be easy to remove. Of course, the declaration file will need significant cleanup.

dts-gen ReferenceError: jQuery is not defined

1 Answers1