RangeError: Maximum call stack size exceeded | Node JS | SPFX React

I literally had no idea that my minor experiment can ruin my 10 hours in troubleshooting. However, at the end, you learn something new.

I am currently developing a project in SPFX - React to build a customized portal for a client. Later today i modified a config file in the SPFX project called "config.json" to include a new script file. Everything worked perfect until I stopped the debugging and start it again after some time. When I ran Gulp Serve I start seeing below error when Node tried to start "webpack"

await Promise.all(externalModule.globalDependencies.map(async (dependencyName) => {

RangeError: Maximum call stack size exceeded

and some other errors like below.

This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:

Googled around and found few solutions like clearing NPM cache with npm cache clean --force and deleting package-lock.json, then ran npm install again, however nothing worked for me. Then I tried to figure out what changes I made today which could cause this error and then I found the problem. The error was pointing to a file on below path.

\node_modules\@microsoft\sp-build-core-tasks\lib\webpack\LegacyExternals.js

Root Cause and the applied fix:

Since I was using Owl carousel in my project, I tried to add a JS file in my project and put it as Require. As of now, I do not why I was not able to add a new entry, however I removed that new entry from the Config.json and the project build successfully this time.

This is not the proper fix and I need to learn more about it, however since I do not need that JS file I removed it to compile my code again.

Cheers...!