TypeScript AMD unable to resolve external module with custom require.config baseUrl

Question

I have some troubles with typescript + requirejs. I have two projects (the main one and the one with unit tests). It looks like this:

solution with two projects
moduleA.ts:

export class A {
    constructor(someThing: string) {
        this.someThing = someThing;
    }
    someThing: string;
}
export var aInst = new A("hello from module A");

moduleB.ts:

import moduleA = require('moduleA');

export class B {
    private a: moduleA.A;

    constructor(a: moduleA.A) {
        this.a = a;
    }

    getSomeThing() {
        return this.a.someThing;
    }
}

export var bInst = new B(moduleA.aInst);

requireConfig.js:

require.config({
    baseUrl: "/app",
});

myTest.ts:

import moduleB = require('moduleB');

QUnit.test('my test', () => {
    QUnit.equal("hello from module A", moduleB.bInst.getSomeThing());
});

testRequreConfig.js:

require.config({
    baseUrl: "../Base/app",
});

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="Content/qunit.css" type="text/css" />
    <script type="text/javascript" src="Scripts/qunit.js"></script>

    <script src="Scripts/require.js"></script>
    <script src="test/testRequreConfig.js"></script>
</head>
<body>
    <h1 id="qunit-header">Unit Tests</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture">test markup, will be hidden</div>

    <script type="text/javascript">
        (function () {
            QUnit.config.autostart = false;
            require(['test/myTest.js'], QUnit.start);
        }());
    </script>
</body>
</html>

We are not able to change Base project. We want be able to use moduleB in Test project (loading by requirejs by 'moduleB' string). What we have:
unable to load
TypeScript compiler unable to resolve external module (because it have no idea where to look for it). If we put

declare module "moduleB" {
 
    export  ...
}

in *.d.ts file - then we would be able to use it. But in real project we have a lot of typescript files and it's not possible to manually write 'declare' for each of them. Is there any approach to handle it? The main problem is the fact, that we cant edit require.config (for some reasons).

Is it possible to get tsc.exe to know about require.config?

Current workaround is writing .d.ts file for each module declare module "moduleB" {...} with custom name (relative to require.config baseUrl). Is it possible to make tsc.exe generate .d.ts with this ambient module declaration with custom name string? It would be totally awesome if we can somehow add declare module %some_string% { and } around content of tsc generated .d.ts file (and remove all declare keywords inside). — Valery Petrov
– Valery Petrov, Commented Apr 17, 2014 at 9:52
Okay, finished with "after build" event and correction .d.ts files generated by tsc (wrapping with declare module with relative path corresponds to baseUrl from require.config). This is a working workaround, but still just a workaround. Continue looking for better solution. — Valery Petrov
– Valery Petrov, Commented Apr 18, 2014 at 7:30

basarat · Accepted Answer · 2014-04-16 14:00:38Z

3

Is it possible to get tsc.exe to know about require.config?

Unfortunately no. Your two options are to create the def to tell typescript about the config or use full relative paths.

answered Apr 16, 2014 at 14:00

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Valery Petrov Over a year ago

Full path is not solution for me, because in project we have module dependencies which are resolved in runtime by requirejs with its custom baseUrl (we import module and that module imports another module and so on).

basarat Over a year ago

@ValeryPetrov full relative paths

Valery Petrov Over a year ago

Both relative and absolute paths are not solution for our problem because we have custom baseUrl in require.config. So, requirejs wouldn't find any module if we put full relative path in import ... = require(...) construction. All problems because of custom baseUrl - tsc know nothing about it and can't find any module if we put right requirejs path (relative to baseUrl and other require.config) in require(...)

Yngvar Kristiansen Over a year ago

@ValeryPetrov Did you every find a solution to this? Struggling with the exact same thing.

basarat Over a year ago

@YngvarKristiansen relative paths are always relative to the current file and should not be impacted by baseUrl. I use this (and maintain with others) : github.com/grunt-ts/grunt-ts#transforms

|

Mike Graham · Accepted Answer · 2015-01-18 12:14:36Z

0

I found a work around that might help you too.

I noticed at the bottom of the jquery.d.ts the following code:

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

The ambient module declaration is found when the TypeScript import x=require(<module string>); statement is encountered.

Using this technique, you can define your types and then tack on an ambient module declaration that exports those types and is recognized in the require.

answered Jan 18, 2015 at 12:14

Mike Graham

1,0446 silver badges13 bronze badges

Collectives™ on Stack Overflow

TypeScript AMD unable to resolve external module with custom require.config baseUrl

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest