loading external library with typescript front end app

Question

I am trying to use Axios in my front end typescript project and I am getting this error:

Uncaught ReferenceError: require is not defined
    at file.ts:1

I am started learning typescript and thought to do some ajax call, here is the source code:

File.ts:

const axios = require('axios').default;
async function fetchInitData() {
    const resp = await  axios.default.get('http://localhost:8080/issues');
    return resp.data;
}

// const threads = require('worker_threads');
window.onload = async function () {
    let fetchInitData1 = fetchInitData();
    console.log(fetchInitData1);
    document.getElementById('totalbugcount').innerText = await fetchInitData1;

}

package.json:

{
  "name": "type1",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "axios": "^0.19.2"
  },
  "devDependencies": {
    "commonjs": "latest",
    "requirejs": "latest"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "build\\web\\assets\\js"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/scripts/**/*"
  ]
}

and after transpilling, this file gets generated:

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var axios = require('axios').default;
function fetchInitData() {
    return __awaiter(this, void 0, void 0, function () {
        var resp;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, axios.default.get('http://localhost:8080/issues')];
                case 1:
                    resp = _a.sent();
                    return [2 /*return*/, resp.data];
            }
        });
    });
}
// const threads = require('worker_threads');
window.onload = function () {
    return __awaiter(this, void 0, void 0, function () {
        var fetchInitData1, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    fetchInitData1 = fetchInitData();
                    console.log(fetchInitData1);
                    _a = document.getElementById('totalbugcount');
                    return [4 /*yield*/, fetchInitData1];
                case 1:
                    _a.innerText = _b.sent();
                    return [2 /*return*/];
            }
        });
    });
};
//# 
//# sourceMappingURL=file.js.map

This is the line whereby the browser is pointing error:

Uncaught ReferenceError: require is not defined
    at file.ts:1

Answer 1

Axios and Typescript

Axios recommends requiring the package in the following way for Typescript support:

note: CommonJS usage

In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require() use the following approach:

const axios = require('axios').default;

// axios.<method> will now provide autocomplete and parameter typings

From the documentation

TypeScript and Axios seem to be a common source of confusion, but they're working on it!

Very common

Using 'require' in the browser

Browsers don't support the NodeJS 'require' syntax. If javascript in the browser needs to use require to import packages, developers must add another build-step to resolve those dependencies. Webpack is commonly used with TypeScript, but browserify and others will get the job done! Check out this answer that goes into more detail about require and the browser.