A colleague's dependency is taking precedence over an NX Library

Question

A colleague's dependency is taking precedence over an NX Library

I'm working in a monorepo environment with nx, structured as follows:

apps
  | - my-app
libs
  | - common
  | - my-client

After deployment, the libraries are published on npm with the names @my-org/my-client and @my-org/common. I have set up path aliases in tsconfig.conf to directly reference them in my-app code:

"paths": {
      "@my-org/my-client": ["libs/my-client/src/index.ts"],
      "@my-org/common": ["libs/common/src/index.ts"]
}

The problem arises when my-app uses an external package another-external-package that relies on the published version of @my-org/common.

It appears that when I import @my-org/common in my-app, it defaults to the peer dependency of @my-org/common from another-external-package, instead of using the alias defined in tsconfig.conf.

This issue only occurs in production builds, not in the development environment. Any suggestions on how to instruct nx/tsc to prioritize the library over the published package?

typescript npm nestjs nrwl-nx nrwl

Answer 1

Answer №1

One possible solution is to utilize package overrides.

Consider adding the following code snippet to your package.json file: (not guaranteed to be accurate for your specific scenario)

  "overrides": {
    "@my-organization/my-app": {
      "@my-organization/shared": "$@my-organization/shared"
    }
  }

To learn more about this concept, check out: https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

When you need to make precise modifications to dependencies within your project's dependencies, such as updating a dependency with a known security vulnerability, substituting an existing dependency with a fork, or ensuring uniformity in package versions across the board, implementing an override can be advantageous.

Overrides offer a means to swap out a package in your dependency hierarchy with an alternate version or even an entirely different package. The scope of these adjustments can be tailored to suit your specific requirements.

Answer 2

One possible solution is to utilize package overrides.

Consider adding the following code snippet to your package.json file: (not guaranteed to be accurate for your specific scenario)

  "overrides": {
    "@my-organization/my-app": {
      "@my-organization/shared": "$@my-organization/shared"
    }
  }

To learn more about this concept, check out: https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

When you need to make precise modifications to dependencies within your project's dependencies, such as updating a dependency with a known security vulnerability, substituting an existing dependency with a fork, or ensuring uniformity in package versions across the board, implementing an override can be advantageous.

Overrides offer a means to swap out a package in your dependency hierarchy with an alternate version or even an entirely different package. The scope of these adjustments can be tailored to suit your specific requirements.

Answer 3

Answer №2

I was able to solve the issue by directly adding the dependencies indicated in the tsconfig.conf file to the package.json. Here's how I did it:

"dependencies": {
    "@my-org/common": "file:./libs/common"
}

By doing this, my my-app now utilizes the local version of @my-org/common instead of relying on the peer dependency resolved through @my-org/my-client.

As mentioned by @EcksDy:

The aliases in tsconfig.paths are only for your IDE. The resolve occurs at build time using the ts-loader package, especially if you're using webpack, which is the default configuration for nx apps.

@johey: This isn't about replacing the package called in the dependencies, but rather instructing the app to use the local version instead of the published one :)

Answer 4

I was able to solve the issue by directly adding the dependencies indicated in the tsconfig.conf file to the package.json. Here's how I did it:

"dependencies": {
    "@my-org/common": "file:./libs/common"
}

By doing this, my my-app now utilizes the local version of @my-org/common instead of relying on the peer dependency resolved through @my-org/my-client.

As mentioned by @EcksDy:

The aliases in tsconfig.paths are only for your IDE. The resolve occurs at build time using the ts-loader package, especially if you're using webpack, which is the default configuration for nx apps.

@johey: This isn't about replacing the package called in the dependencies, but rather instructing the app to use the local version instead of the published one :)

A colleague's dependency is taking precedence over an NX Library

Answer №1

Answer №2

Similar questions

Having trouble executing a script in npm to launch testcafe

Encountering an EACCES issue while attempting to download firebase-tools onto Mac Big Sur

What is the reason behind tsc disregarding the include and exclude options in tsconfig.json?

`Set-cookie` isn't effective in dist compilation produced by the `npm run build` command

Nuxt encountered an issue with Vue hydration: "Tried to hydrate existing markup, but the container is empty. Resorting to full mount instead."

Setting an expiry date for Firestore documents

Tips on using services for storing and fetching list data in Angular

Issue with click function not activating in Chrome when using Angular 6

Which is better suitable in TypeScript generics: void, never, or undefined?

Explain the concept of a static async create method having identical parameters as the constructor

Tips for Maintaining User Sessions in Ionic 4 Application

The error TS2300 arises from the duplicate identifier 'PropertyKey' found in the node_modules/@types/core-js/index.d.ts file

Converting JSON to TypeScript in an Angular project

Leverage the useParams data to serve as a state object key in the useSelector function using TypeScript

The type '{}' is lacking the 'submitAction' property, which is necessary according to its type requirements

Deliver either a Promise or a boolean based on the provided parameters, utilizing a default

Next.js encountered an error when trying to locate the 'net' module while working with PostgreSQL

What could be causing the npm start command to not function as expected?

Managing animations with multiple components in Angular 2+

The wildcard syntax for importing statements in Angular 2