CODEWITHSUNDEEP
javascriptrequirejsasp.net-core
ProfK
ProfK

Reputation: 51064

What can I do about a "require is not defined" error in compiled TypeScript?

I have three TypeScript files in my app. When I build, they compile fine, Gulp puts them in the right place, and the the app crashes because I get:

ReferenceError: require is not defined

For each of the three JS files output from the TS compilation. Now I can't very well tell tsc "do not use require", can I?

When I add the reference 

<reference path="~/wwwroot/js/system.src.js" />

to gulpFile.js, then require works in that file, but that is running on my build, not in runtime on the browser. It does not work if I add it to one of the compiled JS files.

Upvotes: 3

Views: 6266

Answers (1)

Tseng
Tseng

Reputation: 64160

You need to include a few files "manually" to your index.html or whatever (i.e. cshtml Razor template) you use, before you load your application. It should look something like this

<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="~/lib/core-js/client/shim.min.js"></script>
<script src="~/lib/zone.js/dist/zone.js"></script>
<script src="~/lib/reflect-metadata/Reflect.js"></script>
<script src="~/lib/systemjs/dist/system.src.js"></script>

<!-- 2. Configure SystemJS -->
<script src="~/app/system.config.js" asp-append-version="true"></script>
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

The order is important. That's required to run the application.

If you get the errors in i.e. Visual Studio, then you may be missing the required "typings".

Until now, you required to install typings (install nodejs from the nodejs page to make it globally available in the shell/powershell/command line) and then run npm install typings -g to install typings and switch to the folder where your project is and run typings install dt~node, typings install dt~jasmine and typings install dt~core-js. This will install typing files in the typings folder.

With TypeScript 2.0 there is a newer of installing the type definitions via npm w/o the need of typings (see TypeScript 2.0 announcement here), by running the following command: npm install -s @types/<nameofthelibrary>, i.e. npm install -s @types/node, npm install -s @types/jasmine and npm install -s @types/core-js.

The require method is defined in the node package/typings, as seen in declare var require: NodeRequire; in the index.d.ts file inside the node typings.

Upvotes: 2

Related Questions