Error: The module cannot be located due to a recursion issue in resolving within the Angular application

Trying to import my module 

import { waitProp } from 'wait-prop';

Encountering the following error:

ERROR in ./src/app/qr-scanner/qr-scanner.component.ts
Module not found: Error: Recursion in resolving
Stack:
  resolve: (/Users/gkucmierz/workspace/web-tools/src/app/qr-scanner) wait-prop
  newResolve: (/Users/gkucmierz/workspace/web-tools/src/app/qr-scanner) wait-prop
  parsedResolve: (/Users/gkucmierz/workspace/web-tools/src/app/qr-scanner) wait-prop module
  describedResolve: (/Users/gkucmierz/workspace/web-tools/src/app/qr-scanner) wait-prop module
  rawModule: (/Users/gkucmierz/workspace/web-tools/src/app/qr-scanner) wait-prop
  module: (/Users/gkucmierz/workspace/web-tools/src/app/qr-scanner) wait-prop
  resolve: (/Users/gkucmierz/workspace/web-tools/node_modules) ./wait-prop
  newResolve: (/Users/gkucmierz/workspace/web-tools/node_modules) ./wait-prop
  parsedResolve: (/Users/gkucmierz/workspace/web-tools/node_modules) ./wait-prop
  describedResolve: (/Users/gkucmierz/workspace/web-tools/node_modules) ./wait-prop
  relative: (/Users/gkucmierz/workspace/web-tools/node_modules/wait-prop) 
  describedRelative: (/Users/gkucmierz/workspace/web-tools/node_modules/wait-prop) 
  rawFile: (/Users/gkucmierz/workspace/web-tools/node_modules/wait-prop) 
  file: (/Users/gkucmierz/workspace/web-tools/node_modules/wait-prop) 
  relative: (/Users/gkucmierz/workspace/wait-prop) 
  describedRelative: (/Users/gkucmierz/workspace/wait-prop)

Angular version:

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.0
Node: 14.4.0
OS: darwin x64

Angular: 10.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@angular/cdk                      10.0.0
@angular/cli                      10.0.0
@angular/material                 10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

Any thoughts on what might be causing this issue?

I'm still unsure about the content of this message, I hope it doesn't appear too code-heavy. I've included various details about my environment versions.

javascriptangulartypescriptrecursionimport

Answer №1

Similar to @circleofconfusion, I am encountering this issue on both my CI system and a docker container that manipulates my node_modules directory in a way that mirrors actions on the CI setup.

The solution I discovered involves using the --preserveSymlinks argument with the ng test command (which is where the error occurs). This argument helps prevent the recursive resolution problem I was facing with a particular module.

You can find more information on this argument at https://angular.io/cli/build and make changes to your angular.json file to set this property without needing to specify it each time on the command line. Simply add it to the options block in any relevant builders (typically those starting with "@angular-devkit/build-angular"). This will instruct Angular not to resolve symlinks to their actual paths, thus resolving the issue (especially if your node_modules is symlinked to a shared location).

I hope this information 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

Which property within the <mat-option> element is used for toggling checkboxes on and off?

I'm experimenting with dynamically checking/unchecking a checkbox in mat-option. What attribute can I use for this? I've successfully done the same thing with mat-checkbox using [(ngModel)]. Here's the snippet of my code: app.component.html ...

htmlangulartypescriptcheckboxangular-material

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

I attempted to place a textarea within a dialog box, with the intention of retrieving the value of that textarea when the "ok" button is clicked. However, I am encountering difficulties in retrieving the value. What could possibly be causing this issue? ...

javascriptjqueryhtmlcssjquery-ui

A guide on transferring documents between collections using Mongoose and MongoDB

I have a list of tasks that includes both completed and incomplete items. Additionally, I have two buttons - one for deleting an item (which is functional) and the other for marking an item as done or not. I am struggling with creating a function to move ...

javascriptmongodbexpressmongoose

Troubleshooting: MongoDB only updating the initial document

When I try to update the guild document using one of my commands, it only updates the top guild document instead of the specific guild it was sent in. Here's a picture to help illustrate the issue: https://i.sstatic.net/1VRza.png I am looking to upd ...

javascriptnode.jsmongodbmongoosediscord.js

Having Trouble Showing Loading Component on Next.js v13

Having some issues with setting up a loading component in my Next.js v13 project. I followed the documentation by creating a file called loading.tsx in the src directory, but it's not appearing on the page as expected. I've also included a functi ...

javascriptreactjstypescriptnext.jsnext.js13

Using fetch, axios, or similar methods, if the error is not captured, the application crashes instead of being handled by the `catch` block

Before sending our request, it is crucial to ensure a stable internet connection. This is typically done using the following code: NetInfo.isConnected.fetch().then(async isConnected=> { if(isConnected){ try { let result = await fetch(MY_RE ...

javascriptreactjsreact-nativefetch-api

When the mat-select form-field in Angular is focused, the mat-label vanishes

Recently delved into Angular and have been studying the Material documentation on mat-form-fields. Encountering a strange bug where the mat-label disappears upon focusing the form-field, only to reappear once focus is lost. The issue seems to be specific ...

angularangular-material

What is the best way to pass form values from child components to parents when utilizing a value accessor implementation?

What is the most effective method to retrieve the values of a child component control group from a parent component? I have currently implemented this using value accessor, but I am curious about the best approach. You can check out the plunker demo I have ...

angular

Submitting a file using Ajax XMLHttpRequest

Currently, I am facing an issue while attempting to send a file using the following XMLHttpRequest code. var url= "http://localhost:80/...."; $(document).ready(function(){ document.getElementById('upload').addEventListener('cha ...

javascriptajaxjqueryfile-uploadxmlhttprequest

The content security policy is preventing a connection to the signalr hub

Currently, I am developing an application using electron that incorporates React and Typescript. One of the features I am integrating is a SignalR hub for chat functionality. However, when attempting to connect to my SignalR server, I encounter the followi ...

reactjstypescriptelectroncontent-security-policyelectron-forge

Encountering an issue when trying to retrieve the "createdAt" property in Cloud Code using the Parse Framework

I am working with Cloude Code to develop a more complex query, but I am having trouble accessing the automatically created "createdAt" property by Parse. Here is my code: Parse.Cloud.define("get_time", function(request, response) { var query = new Par ...

javascriptiosarraysparse-platform

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

javascriptnode.jsreactjsexpresswebpack

Adjust the size of an Angular component or directive based on the variable being passed in

I'm looking to customize the size of my spinner when loading data. Is it possible to have predefined sizes for the spinner? For example: <spinner small> would create a 50px x 50px spinner <spinner large> would create a 300px x 300p ...

javascripthtmlangulartypescript

What are the best practices for using .toString() safely?

Is it necessary for the value to return toString() in order to call value.toString()? How can you determine when you are able to call value.toString()? <script> var customList = function(val, lst) { return { value: val, tail: lst, t ...

javascripttostring

Run the function multiple times by substituting a portion of the argument in a sequential

I am facing a challenge with a method (exampleObj.method) that requires arguments of an object and a function. The code snippet is as follows: exampleObj.method({ name1: 'string1', name2: 'string2', name3: &apos ...

javascriptarraysfunctionmethods

operating efficiently even when producing an incorrect output type

Exploring Typescript for the first time on Codepen.io has left me puzzled. I'm unsure why, despite defining the function signature and return type with an interface, I am able to return a different type without encountering any errors. Is there somet ...

typescript

Using multiple `setState` calls without synchronization can lead to issues, especially when one of them uses a value obtained from `

In my discovery: When there are two instances of setState The first one is invoked with a value obtained from await Both calls occur in the same thread It results in a scenario where one state is updated while the other remains unchanged. For instance: ...

javascriptreactjs

The footer is now accompanied by the <v-navigation-drawer> on the side

I am looking for a way to dynamically adjust the height value of a style applied to an element based on certain conditions. Specifically, when scrolling to the bottom, I want the height to be 77.5%, when the footer is not visible at all, it should be 100%, ...

javascriptvue.jsvuetify.jsnuxtjs3

The 'toDataURL' property is not recognized on the 'HTMLElement' type

Hey there! I'm new to TypeScript and I've been experimenting with generating barcodes in a canvas using JSBarcode and then adding it to JSpdf as an image using the addImage function. However, I keep encountering the error mentioned above. barcod ...

angulartypescriptionic2

"React and Next.js are causing a return value of undefined on

After spending a few hours working with NextAuth and utilizing the Twitter API for login and tweet searching, I have encountered a minor issue. Setting up most of the things was smooth, but I am facing some problems with fetching API routes on the client ...

javascriptreactjsnext.js