Typescript in browser produces `ReferenceError: require is not defined`

Question

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

score 0 · Answer 1 · answered Mar 25 '19 at 15:58

According to https://stackoverflow.com/a/38531466/1663462 I should 'bundle all the files into one' "outFile": "compiled.js"

outFile is not the right way to bundle all the files into one when using a module system.

Instead use webpack (http://webpack.js.org/) to bundle all the modules into a single output .js file.

This is actually mentioned in the linked answer as well

Typescript in browser produces `ReferenceError: require is not defined`

1 Answers1