NPM workspace and VSCode node_modules path - node.js

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.

Related

Missing /src and /dist in node_module (with workspaces)

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.

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!

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

NodeJS: installing dependencies from package.json located one level above the working folder

The project I need to work upon is structured in a way that the package.json file is one level abov the code folder. The code is located at "D:\MyNodeProj\Source\"
All the files and code is located under "Source" project including "node_modules" folder. Package.json file is located out of "Source" folder. It is located at "D:\MyNodeProj\package.json" When I try to run the project it gives an error: Cannot find module 'winston-logzio'
I know this has something to do with package.json's location as winston-logzio's entry is there in package.json
I tried npm install but it is also throwing error. It used to work before when package.json and node_modules folder were on same level. Now that package.json is one level up we are haviing all sorts of trouble.
What is the fix for this? Please note, we can not change the location of package.json now Don't know for what reason but the architect want it this way.
If you use prefix for the parent directory, you will be able to use npm install --prefix=./../ in the project folder (D:\MyNodeProj\Source\), this command will install node_modules in the parent directory(D:\MyNodeProj\). But in order to make the node_module visible to your project you can set NODE_PATH to the parent directory and then run the project.

Activating extension `ms-vscode.wordcount` failed: Cannot find module 'd:/VSCode/vscode-wordcount/out/extension'

I try to build and debug an extension in Code.
I downloaded the sample of word-count from https://github.com/microsoft/vscode-wordcount.
When I clicked F5, ./out folder was not generated and I saw failure: Activating extension ms-vscode.wordcount failed: Cannot find module 'd:/VSCode/vscode-wordcount/out/extension'.
I found the post
https://github.com/Microsoft/vscode-go/issues/35
and I think this was because I failed to build the extension.
And I checked my path that node and npm were both set.
I found there were 2 possible issues.
I could not find .\node_modules folder in my extension folder. The folder structure is like
.vscode\
-- launch.json
-- settings.json
-- tasks.json
image\
test\
typings\
-- vscode-typings.d.ts
extension.ts
package.json
tsconfig.json
My node version is v0.12.2.
Could you give me some hints how to investigate the issue?
You probably downloaded directly from GitHub.
You will need to run npm install in your project's folder in order to create the node_modules directory and add the required dependencies.
If you simply want to install the extension to use it, you will also need to:
Move the folder to the correct place
npm install
OR
Install the built version directly from the Visual Studio Marketplace through the command pallet.

Resources