Combining two interconnected projects: A guide to compiling mutual project dependencies

Question

Combining two interconnected projects: A guide to compiling mutual project dependencies

I am encountering difficulties while constructing a project (@red5/middleware) that relies on another project (@red5/router), which in turn depends on the initial project (@red5/middleware).

When I execute the following command:

rm -rf types && tsc -p .

An error is thrown indicating that it cannot locate the .d.ts file(s) due to their removal using rm.

../router/types/Route.d.ts:4:28 - error TS7016: Could not find a declaration file for module '@red5/middleware'. 'C:/Users/rnaddy/Documents/vscode/projects/red5/framework/middleware/lib/index.js' implicitly has an 'any' type. Try
npm install @types/red5__middleware
if available or include a new declaration (.d.ts) file with
declare module '@red5/middleware';

@red5/router -> route.ts

import { Middleware } from '@red5/middleware';

If I omit the rm -rf types command, errors are raised stating inability to overwrite the input file, but the previously mentioned error is no longer present.

What steps can I take to resolve this issue while still utilizing the rm -rf types in my command?

middleware/tsconfig.json

{
  "compilerOptions": {
    "outDir": "lib",
    "declarationDir": "types"
  },
  "extends": "../tsconfig.json",
  "include": [
    "src/**/*.ts"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "strict": true,
    "removeComments": false,
    "inlineSourceMap": true
  },
  "exclude": [
    "lib",
    "types"
  ]
}

javascript typescript tsc tsconfig

Answer 1

Answer №1

Are you in the process of developing these projects, or are they already under construction? It seems like the issue may lie in the dependency pattern being utilized.

Regardless, in order to achieve the desired outcome, it is essential to update one module at a time.

Start by using the previous version of the older module as the dependency for the current version of the new module.

Once the updates are applied, proceed to modify the other solution accordingly.

Remember to focus on one solution at a time; making changes to both simultaneously will disrupt the dependency and prevent successful compilation.

Answer 2

Are you in the process of developing these projects, or are they already under construction? It seems like the issue may lie in the dependency pattern being utilized.

Regardless, in order to achieve the desired outcome, it is essential to update one module at a time.

Start by using the previous version of the older module as the dependency for the current version of the new module.

Once the updates are applied, proceed to modify the other solution accordingly.

Remember to focus on one solution at a time; making changes to both simultaneously will disrupt the dependency and prevent successful compilation.

Answer 3

Answer №2

The solution to the problem was simply adjusting the tsconfig.json file.

There are two key components required:

compilerOptions.baseUrl - Specifies the base directory for resolving non-relative module names.
compilerOptions.paths - Contains a list of path mapping entries for module names relative to the baseUrl.

For instance, in the @red5/middleware module, we can reference the router as follows:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@red5/router": [ "../router" ]
    }
  }
}

Similarly, in the @red5/router module, we can reference the middleware like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@red5/middleware": [ "../middleware" ]
    }
  }
}

This configuration ensures that everything resolves correctly to their respective locations.

Answer 4

The solution to the problem was simply adjusting the tsconfig.json file.

There are two key components required:

compilerOptions.baseUrl - Specifies the base directory for resolving non-relative module names.
compilerOptions.paths - Contains a list of path mapping entries for module names relative to the baseUrl.

For instance, in the @red5/middleware module, we can reference the router as follows:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@red5/router": [ "../router" ]
    }
  }
}

Similarly, in the @red5/router module, we can reference the middleware like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@red5/middleware": [ "../middleware" ]
    }
  }
}

This configuration ensures that everything resolves correctly to their respective locations.

Combining two interconnected projects: A guide to compiling mutual project dependencies

Answer №1

Answer №2

Similar questions

Exploring the retrieved data from the AJAX/ASP.NET controller update for a fresh perspective

Filtering items in a list using Vue JS by different tags

Discover the underlying element that is being blurred when clicked

The entry for package "ts-retry" could not be resolved due to possible errors in the main/module/exports specified in its package.json file

Tips for updating the minimum value to the current page when the button is pressed on the input range

Combine various form input values with a specific name into a single array using Node.js with the npm forms package

Error encountered in Node/Express application: EJS partials used with Angular, causing Uncaught ReferenceError: angular is not defined

attach an event listener for the click event

Accessing location information using jQuery from Google's Geocoding API

What are the steps to integrate node-inspector with `npm start` in my application?

What causes the undefined error when a promise rejection is encountered?

Encountering Timeout Issues with Reading Streams on Amazon S3 using Express.js

Update the DOM by setting the innerHTML with a template tag

Is it possible to conduct an auction in JavaScript without using the settimeout or setinterval functions?

Angular directive ng-if on a certain path

Update the Vue method

Making modifications to the database will trigger real-time updates in the web interface. How is it possible to achieve this seamlessly?

Is there a race condition issue with jQuery Ajax?

Vue.js parent component sending new data: prop mutation detected

Hover over elements to reveal D3.js tool tips