Can path mappings be utilized across various referenced projects?

Struggling with setting up path mapping between two different typescript projects within a yarn workspace configuration.

There are 2 separate projects in the yarn workspace, resulting in the following folder structure:

packages
├── common
│   ├── node_modules
│   ├── package.json
│   ├── src
│   │   └── logger.ts
│   └── tsconfig.json
├── main
│   ├── node_modules
│   ├── package.json
│   ├── src
│   │   ├── app
│   │   │   └── settings.ts
│   │   └── main.ts
│   └── tsconfig.json
tsconfig.base.json
node_modules

In the tsconfig file for /main project, I have set the following:

    "baseUrl": ".",
    "paths": {
      "Common/*": ["../common/src/*"]
    },
    "references": [
    { "path": "../common","prepend": true }
  ]

Trying to import a default export from the module in main/src/main.ts using this syntax:

import Log from 'Common/logger'

However, encountering the error:

TS2307: Cannot find module

This issue is unusual as it has not been encountered before with typescript, prompting thoughts that it may be related to the path being mapped and used as a project reference simultaneously.

Expecting the setup to function normally, enabling the import of ../common/src/logger as Common/logger.

Answer №1

In this scenario, the issue arose from my extension of the tsconfig.base.json file without the "paths" key being defined within it. It's like trying to override a property that doesn't exist in the base configuration, following the principles of inheritance in OOP.

The solution was straightforward - I simply had to include the following code snippet:

    "paths": {
      "Common/*": ["./packages/common/src/*"]
    }

within the tsconfig.base.json file, and all was resolved smoothly.

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

Click to reveal additional images once the "show more" button is pressed

Hey there! I'm currently working on implementing a feature where, upon clicking "show more", 3 images will be displayed. And if the user clicks again, another set of 3 images will appear, and so on. I seem to be facing some difficulties with the JavaS ...

Spontaneously fluctuate image transparency

I'm in need of some assistance with an issue I'm facing. I have 5 images positioned using Bootstrap and I want to add a fade animation to them on page load. Below is the code snippet I've been using, which works fine, but I would like the im ...

use javascript to color the image based on a specified number or percentage

Looking for a method to dynamically fill an image based on a percentage. Is there a dynamic approach or is it simpler to create images at specific intervals? I am working with Angular and need to set the percentage of a 1 to 5 rating system from AJAX. h ...

Animate the div only when the button is clicked

I need a way to hide the text inside a div when it exceeds a certain height, but then expand it to full height upon clicking a button. However, I want this action to only affect the parent div of that specific button, rather than all the divs on the page. ...

Utilizing JS Underscore for combining and organizing arrays with common keys

I am facing a scenario where I have two arrays: "array_one": [ { "id": 1, "name": One }, { "id": 2, "name": Two } ] "array_two": [ { "id": 1, "name": Uno }, { "id": 3, "name": Three ...

The ongoing ESLint conundrum: Balancing between "Unused variable" and "Unknown type" errors when utilizing imports for type annotations

I've encountered a linting issue and I need some guidance on how to resolve it. Here's the scenario - when running $ yarn lint -v yarn run v1.22.4 $ eslint . -v v6.8.0 With plugins vue and @typescript-eslint, I have the following code in a .ts ...

The unzipper will disregard any empty directories within the file

I am a Japanese Web Developer. Unfortunately, I struggle with English. https://www.npmjs.com/package/unzipper This library is currently in use by me. Below you will find my code snippet: // unzip module import fs from 'fs-extra' import unzip ...

Unexplained disappearance of div element in Vue Router's Navbar

I have been working on integrating a Vue Router into my navbar and everything seemed to be going well. You can check out the code here. The navigation menu I created works perfectly, allowing users to navigate between the home template and about template w ...

Combining Imported Models in Three.js: A Guide

I'm working on optimizing the draw calls in my THREE.js scene by reducing the amount of rendering required. I have a grid of large 32x32 tiles that are .gtlf models imported from the disk. Each tile has a model with just 8 vertices and a texture. Howe ...

Transitioning from the older version of Angular (1.0.8) to the newer version (1.2.0

Transitioning to the latest production version of Angular has been quite challenging for me. I have meticulously followed the migration guidelines, focusing mainly on the underscore prefix \ private attributes section that seemed relevant to my situa ...

Having trouble installing vue cli, attempted both yarn and npm but neither are functioning properly?

I've been attempting to set up Vue CLI but encountering an error: NPM warns that [email protected] has been deprecated. More info at https://github.com/request/request/issues/3142 NPM also warns about [email protected]. Deprecated link: ht ...

Exploring the concept of inheriting AngularJS modules

I am intrigued by the behavior of AngularJS. I am wondering if AngularJS modules inherit dependencies from other modules. Let's consider the following structure: var PVNServices = angular.module('PVN.services', []); PVNServices.factory(&a ...

Utilize multiple activated modules in Angular 2

Recently, I've been exploring the new features of Angular 2 final release, particularly the updated router functionality. An interesting example showcasing the router in action can be found at this link: http://plnkr.co/edit/mXSjnUtN7CM6ZqtOicE2?p=pr ...

Retrieving a PHP script from within a DIV element

I am seeking assistance to successfully load a PHP file from a DIV call. Below is the code I have used: <html> <head> </head> <body> <script class="code" type="text/javascript"> $("#LoadPHP").load("fb_marketing ...

Having trouble locating the type definition file for 'cucumber' when using the Protractor framework with Cucumber and Typescript

Currently immersed in working on Protractor with Cucumber and TypeScript, encountering a persistent issue. How can the following error be resolved: Cannot locate the type definition file for 'cucumber'. The file exists within the pr ...

How can I properly initialize React components?

I am currently learning React.js and experimenting with a progress bar animation. I stumbled upon this code that I would like to incorporate into my project, but I am unsure of where to place it. Check out the code here! The JavaScript code in question i ...

Despite being queried, the new content on Hygraph is still not appearing

Currently, I am in the process of developing my personal portfolio website using NextJS and incorporating a blog feature with hygraph for post storage (which is derived from the default nextjs blog setup). However, I have stumbled upon an unusual issue. Af ...

What is the process by which a JavaScript Date object is converted to a string when you log it to the

Whenever I create objects in JavaScript and output them to the console, I typically see a JavaScript object displayed. For instance: var myObj = { bla: "foo" } console.log(myObj); This code will display: { bla: "foo" } However, whe ...

Error encountered in NextJS: Trying to call res.unstable_revalidate which is not a function

I recently tried out a cutting-edge feature introduced in NextJS v.12.1 . The API itself is functioning correctly and can be accessed. However, I encountered a 500 error with the message res.unstable_revalidate is not a function. This issue persisted wheth ...

What is the correct timing for implementing a JavaScript delay to activate CSS styling?

Let's say I have some CSS like #joe { transition: opacity 500ms; opacity: 0; } Next, I include JavaScript that triggers the addition of a div and then animates the opacity to = 1 when you click the page. document.body.onclick = function () { var j ...