Nodejs crypto module does not work with typescript

Question

I am trying to implement encryption into my project using vuejs and typescript. I successfully implemented it in the .vue file, but when I try to write the encryption into a typescript class, the mocha test runs it, but when I try to compile and open it in the browser i get a javascript error in the console:

app.js:128620 Uncaught ReferenceError: require is not defined
at Object.crypto (app.js:128620)
at __webpack_require__ (app.js:20)
at Object../resources/ts/Classes/Model/Crypter.ts (app.js:125233)
at __webpack_require__ (app.js:20)
at Object../resources/ts/Controller/AuthController.ts (app.js:125924)
at __webpack_require__ (app.js:20)
at Object../node_modules/babel-loader/lib/index.js?!./node_modules/babel- 
loader/lib/index.js!./node_modules/vue- 
loader/lib/index.js?!./resources/js/Components/Includes/Login.vue? 
vue&type=script&lang=js& (app.js:3308)
at __webpack_require__ (app.js:20)
at Module../resources/js/Components/Includes/Login.vue? 
vue&type=script&lang=js& (app.js:124322)
at __webpack_require__ (app.js:20)

The marked line in the app.js is:

module.exports = require("crypto");

I already tried different importing 'strategies' in the typescript file like:

import * as crypto from "crypto";
import crypto from "crypto";
var crypto = require("crypto");

And also adding this in the webpack.mix.js

"node": {
        fs: "empty",
        crypto: true,
        http: true,
        https: true,
        os: true,
        vm: true,
        stream: true,
        path: true
    },

but it didn't work.

The Crypter.ts

import crypto from "crypto";

export default class Crypter {

    public constructor() {
    }

    public static publicEncrypt(data: JSON, publicKey: string): string{
        let dataStr = JSON.stringify(data);
        let dataB64 = Buffer.from(dataStr).toString("base64");
        var buffer = Buffer.from(dataB64);
        return crypto.publicEncrypt(publicKey, buffer).toString("base64"); 
    }
}

The tsconfig.json

    "compilerOptions": {
        "allowUnreachableCode": false,
        "allowUnusedLabels": true,
        "alwaysStrict": true,
        "charset": "utf8",
        "declaration": true,
        "declarationDir": "resources/ts/lib/types",
        "declarationMap": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "lib": ["ES5", "ES6", "DOM", "DOM.Iterable", "ScriptHost"],
        "locale": "en",
        "module": "commonjs",
        "moduleResolution": "node",
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitUseStrict": false,
        "noUnusedParameters": true,
        "outDir": "public/js",
        "baseUrl": "resources/",
        "paths": {
            "Base/*":           [ "ts/*" ],
            "@js/*":            [ "js/*" ],
            "@ts/*":            [ "ts/*" ],
            "Component/*":      [ "ts/Components/*" ],
            "Interface/*":      [ "ts/Interfaces/*" ],
            "Model/*":          [ "ts/Model/*" ],
            "Controller/*":     [ "ts/Controller/*" ],
            "Helper/*":         [ "ts/Helper/*" ]
        },
        "pretty": true,
        "sourceMap": true,
        "target": "ES5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "downlevelIteration": true
    },
    "include": [
        "resources/ts/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
    "files": [
        "./node_modules/@types/node/index.d.ts"
      ]
}

I expect the error to be resulting from wrong compiling or other misconfigurations.

Answer 1

You can't access nodejs crypto module in a web application. Node.js uses the same javascript syntax, but is not running in the browser.

You may need to install another crypto library such as crypto-js, that you can install using npm install crypto-js. There are probably plenty of other libraries that you can choose from (some ideas)