console.log() from node_modules

Question

How do I console.log() from dependencies in node_modules in my node project? I'm using the default create-react-app setup.

When I include console.log() in my application code, logging works fine. However, when I try to include console.log() in the code of one of the project's dependencies in node_modules, these do not appear in my console.

Any way I can get those logs?

Kanter

If you run npm install or npm update it's going to override anything you have in there. I've never modified the code, it's generally considered a very bad practice. Use breakpoints. I think instead of looking for an answer for this question, you should evaluate why you think you need to do this, and find an alternate. – Fuji

Yes, I'm aware. I only want to do it to understand how the module works, since I already have a project using it, and (in theory) debugging like this would be convenient. – Kanter

Answer 1

If you are monkey patching an npm module with a console.log() to debug an issue it should show up just like any other console statement would. It's probable that your root cause is your build. I'm making some assumptions that you are using babel and a bundler tool like Webpack.

• Make sure you are doing a full rebuild of your project
• clear babel cache or try BABEL_DISABLE_CACHE=1 webpack
• Double check the console.log you are adding isn't in source code of the dependency therefor is never being called.
• Try adding a console.log higher up in the file of dependency to better know it's being loaded at all

Alternatively I'd personally recommend you reconsider your approach. While I've actually done this a couple times; if you are adding "debugging" like this to lower level modules you are probably looking in the wrong place for your issue unless there is a legit bug in the lib...

Palatinate

I'm using create-react-app, which uses webpack and babel. However, the configuration is limited. Can your suggestion be done with create-react-app? – Kanter

Yes. create-react-app uses webpack hot reloading as well. So I would also make sure you restart your web service as well (don't just rebuild). Plus you actually need webpack to pick up the new ENV. I believe it's serving the Webpack bundled files from memory. To be sure you should also delete your dist or output folder. Starting the server with the environment variable should be enough to tell babel not to use cached files. – Palatinate

Regarding your statement Double check the console.log you are adding isn't in source code of the dependency therefor is never being called.. It is in the source code, because I want to understand how the module works. Do you mean it's not possible to log from an external module to the console? – Kanter

Sorry, that was poorly worded. Most/many modules compile from source to a distribution. The installed module should only contain the resulting code, but I've seen some modules publish both to the package. Just make sure you are changing the code that is being called by webpack when it's compiling the code. A console.log at the very top of that called JS file would let you know it's at least being pulled in as soon as it's loaded to the page. – Palatinate

Double check the console.log you are adding isn't in source code of the dependency therefor is never being called. - I'm just staring at my editor and console for 15 minutes and I cant understand I glanced over this possibility.. Thanks! – Haman

Just to reiterate what @Kanter said in slightly different terms, if you are editing directly in node_modules (NOT recommended but maybe okay for just a quick log, make sure to delete package and reinstall after ANY edits) make sure you're editing the distribution file, not the source file, since source files are often included but aren't actually being referenced. Usually in the node_modules/package_name folder source files are in /src and dist files are anything else, but it's really per package. @Kanter fixed my problem, thank you – Inwrought

Answer 2

Delete the .cache inside node_modules works for me

Whittling

inside node_modules or in main directory. – Phone

In the main directory. – Kali

Answer 3

If you want to debug a dependency you should copy the dependency from node_modules in to your project, and call from yours projects path

Benedick

Hm, interesting suggestion. However, if the dependency has a bunch of dependencies of its own, wouldn't I need to add all of them as well to make the dependency work as a local module? – Kanter

Hard question, in some cases you can debug in the node_modules, but it's not right solution, anyway if you debug dependency very possible you need to change something in dependency you need to make it locally, because your changes will be overridden if you will do npm install or npm update – Benedick

This is not a valid answer. You can put console logs but just remember to restart the server. Hot reload does not detect changes in dist folders of libraries in node_modules. – Lashandralashar

Answer 4

1.) Add logs to dependencies within node_modules.

2.) yarn cache clean.

3.) Build project and logs should appear.

Fuentes

Answer 5

I was facing the same issue and I solved it by using a link in the package.json.

In my dependencies, I modify the library version with a link path to the local node_modules library folder:

// before
"random-library-name": "^0.0.1",
// after
"random-library-name": "link:./node_modules/random-library-name",

In the mean time I clean the cache of npm:

npm cache clean

Plus, I rebuild the library just to make sure I have the correct version built.

Allodial

Answer 6

As a last resort you can also try manually rebuilding the dependency after adding logging statements to it. For example, if your dep's package.json has a build command like build: gulp build you can navigate to that package via cli and manually run that command.

Burleigh

Answer 7

After having tryed all the solution mentioned above, I tryed with another web browser and it worked

Largescale

Answer 8

I am using next.js v14+, deleting the cache dir in the .next dir did the trick for me.

P.S Remember to restart your application, as node caches modules

Bareback

Answer 9

When i try to add one plugin that time i can see console logs inside terminal which is from node module

sudo ionic cordova plugin add cordova-plugin-app-version

output

✔ Creating ./www directory for you - done! cordova plugin add cordova-plugin-app-version release%%######### 22.1.0 22 Plugin "cordova-plugin-app-version" already installed on ios. Adding cordova-plugin-app-version to package.json

Erik

OP is not talking about existing logging in a library but adding a new console log in lib code. – Jingo

yes this text was written "release%%######### 22.1.0 22" by me inside console.log() – Erik