TypeScript with require.js and jquery does not work on production server (require.js Script Error)

Question

I recently started looking into TypeScript. I am using require.js to load the modules. Currently I am only loading jquery, but this will obviously be expanded.

My project setup is as followed:

app
  > classes
     > Greeter.ts
  > AppConfig.ts
  > AppMain.ts
lib
  > jquery-1.7.2.js
  > require.js
modules
  > jquery.d.ts
  > require.d.ts
app.ts
default.htm

AppConfig.ts

/// <reference path="../modules/require.d.ts" />
/// <reference path="AppMain.ts" />

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2'
    }, 
    shim: {
        jquery: {
            exports: '$'
        }
    }
});

require(['jquery','app/AppMain'], 
    ($, main) => {
        // code from window.onload
        var appMain = new main.AppMain();
        appMain.run();
});

AppMain.ts

import gt = module("app/classes/Greeter");

export class AppMain {
    public run() {
        var el = document.getElementById('CONTENT_PH');
        var greeter = new gt.Greeter(el);
        greeter.start();
    }
}

Greeter.ts

export class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }
 }

.csproj

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptSourceMap> --module AMD</TypeScriptSourceMap>
  </PropertyGroup>
  <Target Name="BeforeBuild">
    <Message Text="Compiling TypeScript files" />
    <Message Text="Executing tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
    <Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>

I got a few examples working on my local machine, but when I try to run it on a live server it gives the following Script Error from require.js.

Error: Script error http://requirejs.org/docs/errors.html#scripterror [Break On This Error]
var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id); require.js (line 194)

I have no idea why this works on my developing machine, but not on a live server.

Running this example locally works in chrome and internet explorer, but not in firefox. But this might be another issue.

If you need additional details please let me know.

@Niko I have setup Visual Studio to compile TypeScripts on save. — Jasper Peferoen
But have you also set it up to compile with option "--module amd"? — Niko
The error you are getting from requirejs means that there is a syntax error in js detected by the vm (browser). I can't see why in your provided sample. Anyways I have some guidance + sample you might find useful : youtube.com/#/watch?v=4AGQpv0MKsA — basarat
@BASarat Great video. Realy clear explenation. I still dont know why my example wont work, but your approach does. — Jasper Peferoen

KMan KMan · Accepted Answer · 2013-08-28T12:08:16

Are you compiling your website in Release mode when you are deploying to your server?

In that case you need to add a release version in the project file:

<PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptSourceMap> --module AMD</TypeScriptSourceMap>
  </PropertyGroup>
  <Target Name="BeforeBuild">
    <Message Text="Compiling TypeScript files" />
    <Message Text="Executing tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
    <Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>

In TypeScript 0.8.2+ the format is:

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

TypeScript with require.js and jquery does not work on production server (require.js Script Error)

1 Answers