If I try to source index.js in my browser I get an error of:
Uncaught ReferenceError: require is not defined
According to https://stackoverflow.com/a/38531466/1663462 I should 'bundle all the files into one' which I tried with setting:
"outFile": "compiled.js"
however compiling then gives me an error of:
index.ts:1:1 - error TS6131: Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'.
1 import * as Highcharts from "highcharts";
Found 1 error.
I'd appreciate if the answer could explain why this occurs, and what solutions are possible (there are various similar question / answers with just blindly suggesting things like CommonJS / systemjs)...
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"sourceMap": true,
"target": "es5",
},
"include": [
"index.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Highcharts = require("highcharts");
document.addEventListener('DOMContentLoaded', function () {
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
//# sourceMappingURL=index.js.map