Duplicate emit when using amd-dependency and es6 ambient import

[nycdotnet]

Hi,

I think that the ///<amd-dependency /> functionality exhibits odd behavior when combined with an ES6 import.

For example, this TypeScript code:

/// <amd-dependency name="jquery" path="/jquery/jquery.min.js" />
import 'jquery';

$('#myDiv').html('Hello');

emits as this JS when using AMD module mode:

define(["require", "exports", "/jquery/jquery.min.js", 'jquery'], function (require, exports, jquery) {
    $('#myDiv').html('Hello');
});

In the emitted JS, the string 'jquery' is included in the requirements for the module (causing an HTTP 404 error at runtime). My expectation would be that 'jquery' here would be considered the same as the 'jquery' inside the amd-dependency comment, so it would be de-duplicated and that only "/jquery/jquery.min.js" would be passed along to the emitted JS.

I can simply remove the ES6-style import and the emit works as expected.

Am I crazy on this?

I know this will probably be moot once #2338 hits.

Possibly related: #4004.

[mhegazy]

this looks right to me. you have two imports one to jquery and one to /jquert/jquery.min.js. i would say remove the amd-dependency and just make the import:

import "/jquery/jquery.min.js";

[nycdotnet]

Thanks for the reply, Mohamed. I wrote a response before, but I deleted it because I think this one is better.

I wasn't aware of the minimalist import syntax that you suggested, and it does work in this case. However, I think maybe jQuery was a bad example because it's actually implemented as a UMD module so $ and jQuery are in-scope in all files merely by including the jquery.d.ts file in the TypeScript compilation context.

Perhaps I'm just hitting up against #2338 again. This new example may better-illustrate what I was expecting. Let's say I want to rename $ to jq inside my module, but still fetch jQuery from /jquery/jquery.min.js. I wrote the following TypeScript code:

///<amd-dependency name="jq" path="/jquery/jquery.min.js" />

import * as jq from 'jquery';

jq('#myDiv').html('Hello');

I was expecting this emit:

define(["require", "exports", "/jquery/jquery.min.js"], function (require, exports, jq) {
    jq('#myDiv').html('Hello');
});

But I got this emit:

define(["require", "exports", "/jquery/jquery.min.js", 'jquery'], function (require, exports, jq, jq) {
    jq('#myDiv').html('Hello');
});

Notice - two jq parameters, and both "/jquery/jquery.min.js" and 'jquery' are included. I can't see a benefit to doing this emit versus the one I was expecting.

Am I just stuck until the mapping functionality is added to tsconfig.json as part of AMD support in #2338?

Thank you so much, as always!!!

[mhegazy]

What you describe was never the intended behavior of the 'amd-dependency' tags, these were mainly kept for importing non-code resources, and should not be used with imports.

[nycdotnet]

OK. Thanks for your responses. It's been very helpful.

As far as aliasing dependencies as a .js script name (instead of as an external module ambient declaration name) when using ES6-style imports and AMD compilation mode - is that impossible still without a post-processor until #2338 is complete for AMD?

Thanks.

Edit: others are asking too: #2338 (comment) @mpawelski