Using npm modules in client-side JavaScript in .NET Core

Question

I am trying to use npm modules in a .NET Core application. I installed the required packages in Visual Studio using the procedure described in Add npm support to a project (ASP.NET Core). After this, my package.json file reads

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "jspdf": "2.5.1"
  },
  "devDependencies": {}
}

According to the documentation of the jspdf site, one should import a class object using

import { jsPDF } from "jspdf";

However, I have not managed to get this to work. In the wwwroot/js directory, I created a test JS script file called doc-generator.js that reads:

import { jsPDF } from "jspdf";

try {

    // Default export is a4 paper, portrait, using millimeters for units
    const doc = new jsPDF();

    doc.text("Hello world!", 10, 10);
    doc.save("a4.pdf");

}
catch (err) {

    console.error(err.message);
}

This is loaded from the Index.cshtml page using

However, this produces an error

Uncaught TypeError: Failed to resolve module specifier "jspdf". Relative references must start with either "/", "./", or "../".

Since the node_modules directory has definitely been created, I also tried using

import { jsPDF } from "../../node_modules/jspdf/dist/jspdf";

which gives the error

Failed to load resource: the server responded with a status of 404 ()

The node_modules/jspdf/dist contains several different files

    jspdf.es.js
    jspdf.es.js.map
    jspdf.es.min.js
    jspdf.es.min.js.map
    jspdf.node.js
    jspdf.node.js.map
    jspdf.node.min.js
    jspdf.node.min.js.map
    jspdf.umd.js
    jspdf.umd.js.map
    jspdf.umd.min.js
    jspdf.umd.min.js.map
    polyfills.es.js
    polyfills.umd.js

So I also tried

import { jsPDF } from "../../node_modules/jspdf/dist/jspdf.es";

which gives error

GET https://localhost:44356/node_modules/jspdf/dist/jspdf.es net::ERR_ABORTED 404

and

import { jsPDF } from "../../node_modules/jspdf/dist/jspdf.es.js";

which gives

GET https://localhost:44356/node_modules/jspdf/dist/jspdf.es.js net::ERR_ABORTED 404

Could anyone please advise me how to use such an npm module in a client-side script in .NET Core?

Thanks in advance!

Using npm modules in client-side JavaScript in .NET Core

0 Answers