Refering to node_modules from TypeScript in an Asp.Net Core app

Question

I'm constructing a simple ASP.NET Core application that uses npm and TypeScript. The structure of my project looks as follows:

/ root
  | wwwroot
    | js
      | AutoGenerated         // <-- TS output goes here
    | view
      | index.html            // <-- imports app.js from "AutoGenerated"
  | scripts
    | app.ts
  | node_modules
    | ..
    | ..
  | package.json
  | tsconfig.json
  | Startup.cs
  | Program.cs

tsconfig is set to "moduleResolution":"Node". All the other configuration is pretty standard so for now I won't include it here so as not to clutter the big picture.

In my app.ts I want to refer to one of the packages downloaded via node, so I added the following line:

import { SomeClass } from "@module/downloadedModule";

The import above gets resolved to "/node_modules/@module/downloadedModule", which is exactly what I need. The whole project compiles and produces an app.js file under /wwwroot/js/AutoGenerated/ as expected.

The problem is that the resulting JS file still contains the reference to node_modules:

import { SomeClass } from "@module/downloadedModule";

which doesn't make sense, as only the files under wwwroot are served by my application.

I found a similar question on SO: Cannot import libraries from Node_Modules to ASP.NET CORE APP and the author suggests extending the static files handler in order to include "node_modules", but I don't want to do this in my application.

Potential solutions that come to my mind (though I'm not sure if they are applicable): 1.) Mapping required files from node_modules to e.g. /wwwroot/dependencies and modifying the import path in JS file during TS compilation. 2.) Bundling my TS files and required node_modules dependencies into a single, self-contained JS file. 3.) Anything else that allows me to use app.js from my html and doesn't require tons of packages.

Bundling all of your modules and packages is your best bet to resolve this and the best user experience for your users. If you do not want to handle the packages, you can often use a CDN version of the modules using a service like unpkg.com — evelynhathaway
– evelynhathaway, Commented Feb 7, 2021 at 5:26
Thanks for the response. I think I'll go for bundling, as I in my prod env I can't rely on any external resources. I found out that webpack can handle bundling in a nice way. Are there any other tools worth recommendation? — LA.27
– LA.27, Commented Feb 7, 2021 at 15:22
I would recommend Webpack or Parcel for the job. You can find good tutorials, documentation, and example configs online. — evelynhathaway
– evelynhathaway, Commented Feb 7, 2021 at 16:32
@evelynhathaway Found it, thanks. Can you write a short summary of your comments as an answer to my question so that I can accept it? — LA.27
– LA.27, Commented Feb 7, 2021 at 17:27

evelynhathaway · Accepted Answer · 2021-02-07 18:30:02Z

1

Bundling all of your npm packages and custom modules is your best bet. If you were to include the entire node_modules directory in your wwwroot, you would be serving a lot of files, so resovling the imports node_modules is impractical.

If you'd like a simple system, you can use a CDN version of your npm packages on a service like unpkg.com.

However, I would recommend a bundler like Webpack or Parcel for the job. You can find good tutorials, documentation, and example configs online for your specific framework. Webpack's Getting Started is a good place to start looking into bundler configuration.

answered Feb 7, 2021 at 18:30

evelynhathaway

1,91716 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Refering to node_modules from TypeScript in an Asp.Net Core app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related