I have an old browser application with a few dependencies that need to be migrated to TypeScript. In order to do this, I included the following in my app.ts file and compiled it against ES6 with AMD (I believe AMD is suitable for browsers):
import * as L from 'leaflet';
import * as LG from 'leaflet-geosearch';
import * as $ from 'jquery';
import * as d3 from 'd3';
This code gets compiled to:
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=app.js.map
To reference this in my HTML, I used the following:
<head>
<script src="scripts/app.js"></script>
</head>
However, when I try to load this in my browser, I encounter the error:
Uncaught ReferenceError: define is not defined
After researching, I found out that this might be due to an issue with RequireJS. Following the documentation from RequireJS at https://requirejs.org/docs/node.html, I installed RequireJS using NPM since I had already installed leaflet dependency via NPM. Instead of directly referencing my app.js in the HTML, I modified it like so:
<head>
<script>
var requirejs = require('requirejs');
requirejs.config({ nodeRequire: require });
requirejs(['leaflet', 'scripts/app.js']);
</script>
</head>
Now, however, I am encountering the error:
require is not defined