vscode debug code in node_modules directory - node.js

I have a node_js project that includes some of our own node_js packages. They are in an npm private repo and show up in node_modules as:
#company/package_name
We are trying to set breakpoints in this code and find they are never hit.
We thought there might be a default skipFile that excludes node_modules and added to our launch.json:
"skipFiles": ["!${workspaceRoot}/node_modules/**/*.js"]
to no effect.
Any tips on how to enable debugging in the node_modules directory?

I know it's an old question but if someone still manages to stumble upon this, you can use VS code to debug node_module files by first symlinking the node_module package with the main project and then telling VS code to use the symlink.
Symlink node_module package
If you are going to be working in a node_module package, it's a good idea to symlink it so that the changes that you make from within your projects are simultaneously applied to the module's code as well and hence, when you are done editing the package, you can directly see the diff and commit it and instead of copy-pasting it from inside node_module and applying it manually.
To symlink a package inside node_module with your project, first clone the repo on your system.
Run npm link inside the directory.
Then go to your main project and then run npm link package_name to link it.
For example, if you wanted to link a package sample-node-module with a project sample-project, which uses sample-node-module as its dependency, you can do it in the following manner:
cd sample-node-module
npm link
cd sample-project
npm link sample-node-module
Be careful that you enter the folder name (and not the package name itself) of the cloned repo in the second link command. You don't have to provide the full path. You can read more about it here
Telling VS Code to use symlinks while debugging
Once you are done with above, you can simply add this small config in your launch.json of VS Code to make it detect breakpoints inside node_modules:
{
"runtimeArgs": [
"--preserve-symlinks"
]
}
Documentation about this can be found here

The problem can be with source maps. Try to add node_modules/example-package files to resolveSourceMapLocations in launch.json, where example-package is directory of module, in which you want to set breakpoint:
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**",
"node_modules/example-package/**/*.js",
]

Related

`npm install <local-package>` is not creating a symbolic link

For some reason, when I run npm install <local-package> the folder inside the "node_modules" is not a symbolic link but instead a copy of some (not all) the files.
The weirdest thing is that these files doesn't seem to respect .npmignore not package.json files field.
Nothing weird in the logs btw
I just found the reason behind this issue. It's the npm version (9.x).
According to their FAQ for 9.x, they changed the local package behavior to copy the files instead of symbolic-linking them. Keeping this here for future references.

Why is my Node.js package missing the main file when installed globally?

This feels like an embarrassing question to ask but having recently published a Node package to the NPM registry, I now find it doesn't work.
The issue seems to be that my main file, ./src/index.js, isn't being included in the global install.
I know this because when I call the package from the command line it
runs ./bin/cli.js in the package as expected, but then throws:
Error: Cannot find module '../src/index.js'
Require stack:
- /usr/lib/node_modules/diffcraft/bin/cli.js
The error even references the line in ./bin/cli.js where the index
file is required, so that's definitely where the problem is.
I also know this because I checked the folder where the module is
installed globally and while the bin folder is there, the src
folder isn't. So the main code for my package just isn't there.
After discovering this, I even patched package.json to ensure that ./src/index.js was explicitly whitelisted in the files array. I hadn't done this before as NPM guidance states that whichever file is listed under main is also automatically whitelisted. But even including the file in files explicitly hasn't worked.
For reference, I don't have an .npmignore file.
I've got a horrible feeling I'm missing something simple and basic... Any ideas why my main file might be being skipped?
The package is diffcraft.
It works if you omit the ./ in front of the files (tested with npm 6.14.4 on Windows):
"files": [
"bin/cli.js",
"src/index.js"
],
This might be a bug in npm.
You can check this without publishing by running npm pack and checking the archive file.
Alternative is using an .npmignore file.

Liferay 7 Theme-Generator: Setting parent theme (baseTheme)

I have used the theme-generator to create a fresh theme.
Now I've created a second theme in the same directory and tried to set it's base/parent theme using gulp extend as explained on these pages:
https://github.com/liferay/liferay-theme-tasks
https://dev.liferay.com/de/develop/reference/-/knowledge_base/7-0/theme-gulp-tasks
After running the command and choosing option 1) to extend the Base Theme , I get the following options:
Styled
Unstyled
Search globally installed npm modules (development purposes only)
Search npm registry (published modules)
No matter if I choose 3) or 4) I cannot find the theme package.
Do I really have to publish the theme to npm to be able to find it?
Following this explanation I could achieve it using npm link:
npm link
Excerpt:
npm link: symbolic links to the rescue Fortunately npm provides a tool
to avoid this tedium. And it's easy to use. But there's a catch.
Here's how it's supposed to work:
cd to src/appy
Run "npm link". This creates a symbolic link from a global folder to the src/appy folder.
cd to src/mysite
Run "npm link appy". This links "node_modules/appy" in this particular project to the global folder, so that "require" calls
looking for appy wind up loading it from your development folder,
src/appy.
Mission accomplished... almost. If you installed Node in a typical
way, using MacPorts or Ubuntu's apt-get, then npm's "global" folders
are probably in a location shared system-wide, like /opt/local/npm or
/usr/lib/npm. And this is not good, because it means those "npm link"
commands are going to fail unless you run them as root.
EDIT: I was wrong to make a npm package out of it when you can also just require it locally. Even relative paths work. Example:
"dependencies": {
"my-liferay-theme": "file:../My-Liferay-theme",
}

browserify-shim error when node_modules folder is a symlink

On the production server node_modules folder is a symbolic link for continuous deployment purposes.
When I run gulp command, I got many errors like this:
Error: Unable to find a browserify-shim config section in the package.json for /home/web/www/persist/node_modules/jquery-ui/jquery-ui.js while parsing file: /home/web/www/persist/node_modules/jquery-ui/jquery-ui.js]
filename: '/home/web/www/persist/node_modules/jquery-ui/jquery-ui.js'
. . .
If I move node_modules in project folder, build process is successfull. How to solve this problem?
Answer from thlorenz (author of browserify-shim)
Linking breaks browserify and shim since your projects dependencies
are outside of your project tree. So when looking upwards these tools
can't find the package.json of your package anymore.
So don't link your node_modules folders .. it's a bad idea anyways
since you're then linked to a global in your system, i.e. it's better
to have all your deps be local to your project. Not sure what your
deployment purposes are, but to me it seems like whoever made that
decision didn't fully understand how node/npm is supposed to work.

keep node_modules outside source tree in development (not production)

I prefer to keep all generated files and dependencies outside my source tree while I work on it.
npm and grunt make that difficult: npm will never allow moving local node_modules, so I have to use --global and --prefix. But grunt does not support such a scheme, apparently.
How can I achieve my objective given the above constraints?
So, if I have a project:
foo/
.git/
src/
gruntfile.js
package.json
I want no extra files in my tree, specifically, node_modules. (Also bower_components and build etc but this is about npm.) This directory should remain untouched while I am working on it and running it. That is all.
Apparently npm link is supposed to do this, but when I tried it still installed all the dependencies in ./node_modules. Any other invocation I cannot fathom; the docs are not clear.
A related suggestion was to use another directory with symlink to my gruntfile or package.json, but grunt just resolved the symlink and continued to work in my original directory!
So far the closest I have come is to link to e.g. ~/.cache/foo/node_modules from my project. Although it achieves keeping the deps out of my tree, I still have this link cluttering my workspace.
I want to know if there is a better way. Will some combination of npm install, npm link, ln, ~/.cache, NODE_PATH and PWD allow me to run my project, from my source tree, and keep it clean of all non-source artefacts?
Swimming against standards is a Very Bad Idea ®.
What you can (and should) do is add node_modules/ to your .gitignore (or whatever ignore file you have for your given source control system) so you don't version these files.
Also, you can use a directory like src/ to organize your code and "shelter" it from the mandatory configuration files (package.json, Gruntfile.coffee, etc).

Resources