How to use TypeScript import statement instead of in a Web application (ASP.NET Core)?

Question

Context

• I have (had) a working version typescript Hello World in my Web application (ASP.NET Core)
• Using typscript compiler via NuGet package "Microsoft.TypeScript.MSBuild" Version="4.4.2" and tsconfig.json. (see below)
• I've wanted to use a 3rd party lib, and successfully added "@types/lodash": "^4.14.175" via packages.json (see below)
• I've added /// <reference path="../node_modules/@types/lodash/index.d.ts"/> (see below)
• All works, but the line /// <reference path="..." is underlined green and ESLint says

Do not use triple slash reference for index.d.ts, use import instead.

OK, I am going to use export/import later anyway, so I've edited the triple slash reference line to be a comment, and added the line import * as _ from "lodash" which compiles fine, but when running in chrome causes runtime error:

Cannot use import statement outside a module

so I changed my <script tag to the following: <script type="module" src="~/js/app.js"></script>

However this causes the following chrome runtime error:

Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".

Question

Now I am stuck, and with my very limited knowledge somehow I guess some step/transformation is missing, but what? I've tried to include some path in my .ts file's import statement (causing compile errors). Compile time I would like to use the working import referring to the @typings, but runtime the lodash.js is coming from cdn, the two nothing to do with each other...

app.ts

// commented out /  <reference path="../node_modules/@types/lodash/index.d.ts"/>
import * as _ from "lodash"
console.log(_.camelCase("Hello"));

emitted app.js

// commented out /  <reference path="../node_modules/@types/lodash/index.d.ts"/>
import * as _ from "lodash"; 
console.log(_.camelCase("Hello"));
//# sourceMappingURL=app.js.map

index.html

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script type="module" src="~/js/app.js"></script>

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "module": "ES6",
    "outDir": "wwwroot/js"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

packages.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/lodash": "^4.14.175"
  }
}

Answer 1

Try to modify the tsconfig.json

// tsconfig.json
{
  ...
  @types: ["node_modules/"] // or typings
}

Or use ES5 require

const _ = require("lodash");

---

Found the following possible solutions

The required files need to be copied over to wwwroot folder, where they can be accessed when the application runs.

For this you'd need either use the bundler to bundle the files together (should be in default ASP.NET Core project template) or use task runners such as Gulp or Grunt to run tasks on build/publishing, which does that for you. See ASP.NET Core Docs on Gulp examples.

Original answer: https://stackoverflow.com/a/43513137/13747848

Note: Please give credit to original respondent!

---

Edit

For the error

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

As of 2021, please consider the following statement by Márton Salomváry (Jan 2018):

Unfortunately even most libraries authored or published in ES6 module format will not work because they target transpilers and rely on the Node.js ecosystem. Why is that a problem? Using bare module paths like import _ from 'lodash' is currently invalid, browsers don’t know what to do with them.

And also the statement by Jake Archibald (May 2017):

"Bare" import specifiers aren't currently supported.

Valid module specifiers must match one of the following:

1. A full non-relative URL.
2. Starts with /.
3. Starts with ./.
4. Starts with ../.

And javascript.info:

In the browser, import must get either a relative or absolute URL. Modules without any path are called “bare” modules. Such modules are not allowed in import.

Certain environments, like Node.js or bundle tools allow bare modules, without any path, as they have their own ways for finding modules and hooks to fine-tune them. But browsers do not support bare modules yet.

Bundlers facilitate the use of "Bare Imports" which is not supported by the browser yet. Unless you bundle your code, I recommend using the solution proposed by @Asler. Besides, a lot of work is currently being done to study the implementation of "Bare Imports" in the browser, please follow this link if you want to monitor the overall progress.

Original answer: https://stackoverflow.com/a/66484496/13747848

Note: Please give credit to original respondent!

---

If you don't wish to use any bundling tools, you will need to provide a path to the lodash folder within node_modules, relative to the JavaScript file that you have the import statement in.

If you do not wish to use a bundler, it would also be worthwhile importing from the specific file, the function you need. For example:

import _each from '../node_modules/lodash/each'

Original answer: https://stackoverflow.com/a/52558858/13747848

Note: Please give credit to original respondent!