You must add the module-alias/register to each file in order to use path aliases in

I am currently utilizing typescript v3.6.4 and have the following snippet in my tsconfig.json:


  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@config/*": ["config/*"],
      "@config": ["config"],
    }
  }

Additionally, I have set up a module alias in my package.json:

  "_moduleAliases": {
    "@config": "dist/config"
  }

The folder structure of my project looks like this:

src
 |-config
     |-index.ts
 |-app
     |index.ts
     |logic.ts
 |-dist

When I attempt to import a module in app/index.ts like so:

import 'module-alias/register';
import config from '@config';

and run npm start with the command:

"start": "node -r ts-node/register ./src/app/index.ts",

Although tsc compiles successfully, npm start throws an error:

Error: Cannot find module '@config' in src/app/logic.ts

To resolve this issue, I must also include the line:

import 'module-alias/register';

in src/app/logic.ts

It appears that adding import 'module-alias/register' in every file where aliases are used is necessary. Is there a way to configure this more efficiently?

Answer №1

@2021

Similar to my experience, I encountered the same issue with TypeScript only allowing module aliasing when each module includes import 'module-alias/register'; at the beginning.

After spending a significant amount of time on this, I came to understand:

tsc does not handle transpiling these decorators, so it is crucial for every user of the JavaScript compiled code to be aware and knowledgeable about how to manage these module imports with alias.

For example:

node index.js
=>
node -r module-alias/register index.js

///

mocha .
=>
mocha -r module-alias/register .

Answer №2

Here's a simple solution to the problem:

To resolve this issue, make sure to place the import 'module-alias/register'; line at the end of the root file (e.g., app/index.ts) after all the other imports. Placing it before other imports may cause it not to work properly.

For instance:

import express from 'express';
import corsFilter from 'cors';
...
import 'module-alias/register'; // Remember to put this after all other imports

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A reference to 'this' is not permissible within a static function in Types

Based on this GitHub issue, it is stated that referencing this in a static context is allowed. However, when using a class structure like the following: class ZController { static async b(req: RequestType, res: Response) { await this.a(req) ...

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

Dealing with a void method in a React unit test by treating it as an object's property

How can I pass a value to a function in an interface to trigger a click event on an element? I have a React component that I want to write unit tests for: const VariantItem = (props: VariantItem): ReactElement => { return ( <div key={props.produc ...

Refreshing the current window with the ``Window.location.reload()`` function

I have integrated a map that displays clients using markers. The map I am utilizing is Leaflet with an AngularJS directive. The issue I am facing is that when I initially access the map, it functions correctly. However, when I change routes, all the marke ...

Form a hierarchical data structure using a combination of three arrays

Here are three sets of data: let firstData = [ {key: value1}, {key: value2}, {key:value3} ] let secondData = [ {key: value1}, {key: value2}, {key:value3}, {key: value4} ] //same structure, different values let thirdData = [ [1,1,1,1], [1,1,1,1], [1,1,1,1] ...

Stop the controller from reloading when navigating in Angular2/Ionic2

Initially, I developed my app using tabs. When navigating to a page, the view would load for the first time (fetch data from API and display it), and upon returning to the same page, nothing would reload because the controller did not run again. Recently, ...

Implement a mouseenter event to all input elements that have specific names stored in an array, utilizing jQuery

I'm struggling to figure out how to apply my function to all input elements with a name that is included in my array. This is what I've attempted so far: var names = ["name1", "name2"]; $(document).ready(function(){ $('input[name=names[ ...

Display toggle malfunctioning when switching tabs

I am currently working on implementing a search function with tabbed features. Everything seems to be displaying correctly without any errors. However, the issue arises when I try to click on any tab in order to show or hide specific content from other tab ...

"Customizing the template of the Angular Material 2 datepicker: A step-by-step

Looking to make changes to the templates of the angular 2 material date-picker? These templates are located within various internal components in @angular/material/esm5/datepicker.es5.js. One option is to directly modify the template in the node package, ...

What is the reason for Object.keys not returning a keyof type in TypeScript?

Wondering why Object.keys(x) in TypeScript doesn't return the type Array<keyof typeof x>? It seems like a missed opportunity as Object.keys outputs that by default. Should I report this on their GitHub repo, or should I just submit a pull reques ...

Is there a way to effectively alter an object that has been assigned in a separate file?

Seeking Assistance: I am facing an issue in my current project where I need to store a javascript object in an external file and then export it using module.exports. The challenge now is that I want another file to be able to modify a specific value withi ...

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

Share an entire /folder through an express server

I am currently working on an express server setup, and I am looking to streamline my route handling for managing an entire directory structure. root /html /css /js /app.js /images /index.html /some-other.htm ...

Tips for arranging elements in proper order following a rotation

Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate ...

Unable to identify collision in JavaScript's 3D environment

I'm currently using three.js to develop a simulation of Brownian Motion, but I've hit a roadblock when it comes to getting the tiny molecules to collide with each other. This is the snippet I have at the moment: function intersects(sphere, other ...

Setting up an abstract state as the backdrop in AngularJS: A step-by-step guide

I am trying to maintain an animated background while switching between different states in my UI-router setup. The goal is for the background to remain constant while only the content of the states changes. Here is how I have set up my UI-router and attem ...

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

For nearly a full week now, I've been plagued by a persistent issue! Here's the situation: I have 6 step tabs - step 1, step 2, and so on. Each tab has a CSS class called "locked" and "active." "Locked" - this style features top: 3em;, causing ...

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

What is the best way to execute a Java script using AJAX from a different file?

I have included multiple ajax scripts in the main body of the Django template. However, when I try to run them from a separate JS file, they do not seem to work. This is an example of one of the working scripts within the body template: <!--Add product ...

Sorting items in backbone.js can be achieved by using the sortBy method

Currently, I am delving into learning backbone.js and have decided to create my own Todo application using backbone.js along with a local storage plugin. At this point, I have successfully developed the Todo app where you can add and remove tasks. However, ...