Missing /src and /dist in node_module (with workspaces) - node.js

I forked a package and made some changes and need to install it locally. Here's my branch.
I ran:
yarn add 'saber2#https://github.com/ilmoi/saber-common#head=ilmoi_support_v0'
which successfully installs the package, but it's missing both /src and /dist and so it unusable.
Having searched for similar issues I unsuccessfully tried:
building and commiting /dist dir (made sure not in .gitignore)
adding a "files" line to package.json (both top level and inside the workspace)
adding a "prepare" line
adding a blank .npmignore
None of those works. Here's how the package looks in node modules:
I suspect the problem is to do with workspaces. For some reason none of them compile / show. Please advise on what I'm missing.

Related

How to properly install dependencies in large projects?

I am a dev on a team inside a very large project. This is the first time I have worked on a project where the node_modules/package-lock files are not in the root of the project. I am used to personal projects with a few folders, files, and the node_modules/package-lock in the root so I can always easily "npm install..." in the root.
I am running into an issue when I try to run npm install (package), it completely breaks my local project. I have to rollback the changes, rebuild, and it works fine again.
Things I have tried:
Navigate to the same directory that node modules is in.
Example: C:\Users\USERID\source\repos\companyName\companyName2\Web\Administration.
Node_modules and package-lock are located here along with ~20 other various folders.
Navigate to the root (even though node_modules isn't located here, figured I'd try).
Navigate to one folder above. I tried this because this is the directory where the Visual Studio .sln file is located.
Example: C:\Users\USERID\source\repos\companyName\companyName2\Web\companyName.Web.Administration.sln
For more context, the specific file I need to add a package to is: C:\Users\USERID\source\repos\companyName\companyName2\Web\Administration\ClientApp\app\letter\letter-create-main.component.ts
I am hoping I can get some clarity on how to properly run npm install in large projects so I can add packages that I need to this monster of a project, and hopefully help others that have this question at the same time!

Which node_modules my project actually use?

We had the following problem:
The project is install under /home/node/project
where project is a soft link to /home/node/deploy/project{version}
The package.json is under /home/node/
We did npm i in /home/node/project which should have found the package.json under /home/node/ and build the node_module has expected.
But for some unknown reason, about a month ago, someone created a package.json under /home/node/deploy
Therefor the npm i build a new node_module under /home/node/deploy which was defected
Although we suspected that the code is using the wrong node_module we couldn't figure out which node_module the code actually use and wasted long time until we realize that a defected node_module was created in the wrong directory
So I would like to know if there is a way to know which node_modules my project actually use at run time?
Delete one of the node_modules folders and run your code. If your code is running without any errors, then it may mean that it is using the other node_modules folder.

NPM workspace and VSCode node_modules path

I am using npm workspaces with typescript as specified in this git README https://github.com/Quramy/npm-ts-workspaces-example
When I do npm i from the project root directory it installs all packages in root directory (node_modules). It doesn't create node_modules directory in each workspace. Because of this, VSCode thinks 'module' is missing (Cannot find module 'abcde' or its corresponding type declarations), hence shows red under line on import line and doesn't show auto complete suggestion.
How can I make VSCode understand that packages are installed in root folder and use it for giving auto complete suggestion and remove red underlines under package import.
I had this issue when turning an existing project into a workspace of a larger project. Here are the steps that worked for me:
Delete package-lock.json and node_modules/ from the subdirectory
Restart VSCode, opening it to the project's new root directory
I think step (2) was the key to making it work, but I don't know for sure.

Vue-repo "Module build failed: Error: No ESLint configuration found"

My Vue project is running fine locally, but when upload it to github repo, download it back from there and npm install, then npm run dev, it throws error Module build failed: Error: No ESLint configuration found.
When I unzip my downloaded repo-files, there's no .eslintrc etc. files that are present when I'm uploading my project, and to my knowledge that is one reason causing this ESLint problem.
Here's the very basic vue init webpack HelloWorld.vue uploaded to my test-repo without any modifications to show how it fails to build after downloading.
Link to my test repo to reproduce the error: https://github.com/tuuchen/vue-movie-app
How can I fix this issue with eslint?
EDIT: I made a fresh project without eslint, and when downloading it from my git repo, It's throwing Failed to compile error, asset optimization[copy-webpack-plugin] WARNING - unable to locate '<path>\myvueapp\static'
EDIT 2: Also .postcssrc is missing when initiating npm install
EDIT 3: Problem solved. I was using webpack for creating my vue project, and it caused all kinds of issues when downloading the project back from git repo. npm install -g #vue/cli did a project that worked without issues.
Sorry for being such a noob.
This issue came up as I created a new project by copying from another project on my Mac. However, the hidden files were not copied!
Solution
The issue got resolved by having these hidden files as well in the new project:
.babelrc,
.editorconfig
.eslintignore
.eslintrc.js
.postcssrc.js
There are other solutions that many have proposed in this Vue Issue that you can refer to if this does not solve your problem.
In my case, I just delete the folder Node.Js and try reinstall node modules using yarn/npm.
if it still did not work, you can try to add file .eslintignore on the root folder and add there the path to the folder we want to omit.
For example, in this scenario, .build/test.js is the desired file to allowlist. Because all dot-folders and their children are ignored by default, .build must first be allowlisted so that eslint becomes aware of its children. Then, .build/test.js must be explicitly allowlisted, while the rest of the content is denylisted. This is done with the following .eslintignore file:
# Allowlist 'test.js' in the '.build' folder
# But do not allow anything else in the '.build' folder to be linted
!.build
.build/*
!.build/test.js
more documentation https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file

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.

Resources