Guide on importing absolute paths in a @nrwl/nx monorepo

I am currently working on a @nrwl/nx monorepo and I am looking to import folders within the project src using absolute paths. I attempted to specify the baseUrl but had no success. The only solution that did work was adding the path to the monorepo root tsConfig.json file like this:

"paths": {
   "*": ["apps/my-app/src/*"]
}

However, the issue arises when I have another project, as I would need to add that project to the path as well. I tried something like this:

"paths": {
   "*": ["apps/*/src/*"]
}

Unfortunately, this approach no longer works as it doesn't match the project folder name. How can I resolve this? Is there a better way to import by absolute paths?

reactjstypescripttsconfigmonoreponrwl-nx

Answer №1

I encountered a similar issue when organizing common DTOs and Event.ts files in my nx monorepo. I discovered that updating the tsconfig.base.json with a simplified path shortcut was helpful. This allowed for cross-app imports while still maintaining the option to set an absolute path in each individual app's tsconfig.json file.

Here is what my base.json looks like:

"baseUrl": ".",
"paths": {
  "libs": [
    "libs/"
  ],
  "app1: [
    "apps/app1/"
  ],
  "app2": [
    "apps/app2/"
  ],
}

With this setup, I now have absolute imports that are based on the app names:

import {CreateUserEvent} from 'libs/events/create-user.event';

For example, this is how a random file in the app1/src/app/ folder can import a file from the libs folder.

The folder structure looks like this:

root ('.') 
|__ app1/src/app/file_with_import.ts
|__ ... 
|__ ...
|__ libs/events/create_user.event.ts

I hope this explanation proves helpful!

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

The specified module '...' is identified as a non-module entity and therefore cannot be imported using this specific construct

Currently, I am facing an issue in my .tsx file where I am attempting to import a RaisedButton component from material-ui using the following code: import * as RaisedButton from 'material-ui/lib/raised-button' Unfortunately, this is triggering ...

typescriptmaterial-ui

Injecting services and retrieving data in Angular applications

As a newcomer to Angular, I am trying to ensure that I am following best practices in my project. Here is the scenario: Employee service: responsible for all backend calls (getEmployees, getEmployee(id), saveEmployee(employee)) Employees components: displ ...

angulartypescriptangular14

Jasmine: A guide to mocking rxjs webSocket

Here is my chat service implementation: import {webSocket, WebSocketSubject} from 'rxjs/webSocket'; import {delayWhen, retryWhen, take} from 'rxjs/operators; import {timer} from 'rxjs; ... export class ChatConnectionService { priva ...

angulartypescriptwebsocketrxjsjasmine

What is the best way to configure a Next.js API route to make a fetch request to an ASP.NET Core API without encountering issues with self-signed certificates?

I am currently in the process of developing a nextjs app that utilizes a .NET core api as its backend. To handle server-side authentication data and obfuscate endpoints, I am using nextjs' built-in api routes as a proxy to the backend. However, I hav ...

reactjsasp.net-coresslnext.jshttps

Encountering complications when importing TypeScript declarations

I am facing a problem with importing declarations from an extended file (I am utilizing this typing). As per the example, I have included this code in my project: import * as SockJS from 'sockjs-client'; import BaseEvent = __SockJSClient.BaseEve ...

typescript

Tips for sorting an array of objects by multiple keys while maintaining the order of each key that comes before

I am looking to create a versatile function that can organize an array of objects based on specified keys, while maintaining the order of previous keys. Here is a sample scenario: const input = [ { a: 'aardvark', b: 'bear', c: 'c ...

typescript

What can be done to ensure smooth functionality of my nested navigation menu on mobile devices?

I'm utilizing the incredible features of Base Web for my website. One of the components I am using is a menu with a child menu, based on this example. The menu works perfectly fine on desktop - when I hover over an option, the child menu appears. Howe ...

javascriptreactjsmobilemobile-safaribaseweb

Vue.js 3 with TypeScript is throwing an error: "Module 'xxxxxx' cannot be located, or its corresponding type declarations are missing."

I developed a pagination plugin using Vue JS 2, but encountered an error when trying to integrate it into a project that uses Vue 3 with TypeScript. The error message displayed is 'Cannot find module 'l-pagination' or its corresponding type ...

typescriptvue.js

Input fields in Next.js are experiencing issues with undefined props

Having some trouble creating a SearchBar feature that updates the "value" prop with user input. Struggling with getting the value and changeInput props to work properly, they keep returning as undefined. Any assistance would be greatly appreciated! cons ...

reactjsnext.js

What is the proper way to manage the refresh token on the client's end within a JWT system?

Curious about what exactly occurs on the client side when the refresh token expires. Is the user directed to a login page and remains logged in, or does the client side log them out automatically? My understanding is that the refresh token is saved in an ...

reactjsnode.jsangularexpressjwt

Having trouble reaching express endpoints with axios while using snowpack and react

I'm currently developing a web application using Express, Snowpack, and React all within the Node.js environment. While I can successfully load the view, I'm encountering difficulties when trying to make requests to specific endpoints. Below is ...

reactjsexpressaxiossnowpack

Leverage Sinon's fakeServer in combination with promises and mocha for efficient

Having an issue here: I need to test a method that involves uploading data to an AWS S3 bucket. However, I don't want the hassle of actually uploading data each time I run my tests or dealing with credentials in the environment settings. That's w ...

node.jstypescriptmocha.jssinon

Setting up pagination in Angular Material can sometimes present challenges

After implementing pagination and following the guidelines provided here. This is my code from the app.component.ts file - import { Component, OnInit, ViewChild } from '@angular/core'; import {MatPaginator} from '@angular/material/paginat ...

angulartypescriptangular-material

Transferring an array of data between two screens within tab navigation using react-navigation in react native applications

My current setup involves using react-navigation without redux. I have two tabs, each with its own stack navigator containing one screen. Both of these screens require an array of locations. Right now, I am initializing and updating the locations array sep ...

reactjsreact-nativereact-navigationreact-state

Encapsulating functions with multiple definitions in Typescript

Struggling with wrapping a function that can have multiple return types based on input parameters in Typescript. Imagine wanting a function to return ReturnA for VariantEnum.a and ReturnB for VariantEnum.b. Consider this implementation of sampleFunction: ...

typescript

Type of Data for Material UI's Selection Component

In my code, I am utilizing Material UI's Select component, which functions as a drop-down menu. Here is an example of how I am using it: const [criteria, setCriteria] = useState(''); ... let ShowUsers = () => { console.log('Wor ...

javascriptreactjstypescriptreact-nativematerial-ui

Button to expand or collapse all sections in Ant Design Collapse component

Is there a way to create a button that can expand or collapse all tabs in an ant.design Collapse component? I attempted to modify defaultActiveKey but it seems like this can only be done during page rendering. If possible, could someone share a code snip ...

reactjstypescriptreact-hooksantd

What is the best way to programmatically route or navigate to a specific route within a Next.js class component?

tag: In the process of creating my app with next.js, I primarily use functional components. The sole exception is a class component that I utilize to manage forms. Upon form submission, my goal is to redirect back to the home page. However, when I attemp ...

javascriptnode.jsreactjsnext.jsrouter

Bypassing CORS/CORB restrictions in a React app without the need for a NodeJS/Express server

Encountering an issue while trying to launch an app on Heroku that fetches a response from Okta, as I am getting a CORB error The Cross-Origin Read Blocking (CORB) has blocked the cross-origin response from with MIME type application/json. Is there a wa ...

htmlreactjsherokucross-origin-read-blocking

Extracting JSON data from Stripe results - A comprehensive guide

I'm having trouble displaying the 'amount_total' in an h1 tag from my Stripe JSON response. Every time I try, I encounter this error: TypeError: Cannot read property 'map' of undefined Here is a snippet of the Stripe JSON output: ...

reactjsnext.jsstripe-payments