How to use project dependencies with ts-node - node.js

I am currently debugging a project that uses ts-node to run locally. Do I have to install ts-node globally for this?
I did install it globally, but now i am seeing typescript errors that stems from diverging typescript versions. I fixed it by setting it to the same version.
Is there a way to use my project dependencies in my CLI to run the project? Or do I HAVE to install things globally?

By default, the node_modules folder has a .bin subdirectory. You can run the local version of ts-node while in the project directory.
Here's what you might type into your shell
cd /path/to/project
./node_modules/.bin/ts-node myFile.ts

Since npm#5.2.0, npm ships with the npx package, which lets you run commands from the node_modules/.bin directory in your current project. For example: npx ts-node -v.
If for whatever reason you have an older version of npm, you can install this package globally with npm install -g npx.
You can use npx <package-name> also for packages that aren't installed yet in your project (see its options).
Alternatively, you can put the following into your package.json:
"scripts": {
"start": "ts-node code/start.ts",
}
Commands in the scripts field also use the local version of a package.

Related

What is the difference between running npx eslint and npx?

I am using npm 8.5.0 and node v16.14.2 on a big project. When I run eslint, I can choose to run it without npx, or I can run it with npx. There doesn't seem to be any difference. I'm writing some npm scripts that run eslint and I don't know whether to write npx eslint or eslint.
What is the difference between running npx eslint and eslint?
npx will download and run the package and is meant for interactive use where you just want to use a tool from the npm registry.
You shouldn't use it in your package.json's scripts section; instead just make sure the desired version of eslint is in your package's dev dependencies and use "eslint" in the scripts, so you're certain to use the correct version.

To import Sass files, you first need to install node-sass

Running create-react-app, I get the error in my create-react-app application:
To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.
I do have node-sass installed.
package.json:
"devDependencies": {
"node-sass": "^4.13.0"
}
project node_modules folder:
I've uninstalled, reinstalled, updated, cleaned cache, etc. How do I fix?
In my case I had the same problem even though node-sass was already installed in my project directory.
To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.
What I figured out is, my project was running on the react scripts installed globally, and there was an another version inside my local project directory. There was a conflict in getting the base path of 'node-sass'.
I uninstalled the local react-scripts and installed it again in the local project directory. Run,
npm uninstall react-scripts then
npm install react-scripts
That fixed my problem!
what worked for me was that I uninstalled global node-sass
and installed it in my current project directory
npm uninstall -g node-sass
npm install node-sass
make sure to stop npm start until after installation, if possible restart your system when installation is done
node-sass has been deprecated. Please install sass or dart sass to fix your issues.
I had the same issue and setting the SASS_PATH environment variable fixed it for me.
For example if you use docker-compose.yml then add:
environment:
- SASS_PATH=node_modules:src
Maybe someone else can explain why this was needed.
In my case below was my error,
./src/modules/TestListing/components/SurveyCard/index.scss
/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!
/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!
/usr/local/lib/node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!
/usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!
./src/modules/TestListing/components/SurveyCard/index.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
The error was happening even though I had installed node-sass globally which was weird.
I figured react-scripts could not able to recognize node-sass in it's environment , Hence I have added node-sass dependency in globally installed react-scripts package
cd /usr/local/bin/node_modules/react-scripts
sudo npm install --unsafe-perm node-sass
In the above command I am actually installing node-sass to a react-script package which is a library, It could fix the issue in my case,
Becareful on the commands, Because I am dong --unsafe-perm, Read it before you do
Actually what worked for me was creating a new folder, creating a react app from there and transferring all the codes to that new folder. Not sure why the problem occurred in the first place.
I had this same problem and I noticed that npm install node-sass was breaking before full installation. I also tried npm uninstall -g node-sass which wasn't adding the package to the package.json file. What worked for me is npm install node-sass --save which installed node--sass and added it as a dev dependency to my package.json file
I had the same issue and I figured out it by installing sass moduele.
npm install sass
or
yarn add sass
node-sass is deprecated, use sass instead. But sass loader expects node-sass. No problem, we can install sass and trick sass-loader that sass is a node-sass
Install sass
npm install sass#^1.55.0 --save
In your package.json file, replace sass entry with this. We can use alias names in package json
node-sass": "npm:sass#^1.55.0
example
"dependencies": {
"axios": "^0.18.1",
"moment": "^2.29.3",
"node-sass": "npm:sass#^1.55.0",
...
works like a charm.
Generally, you should install node-sass:
npm install node-sass --save
# or
yarn add node-sass
How to import
#import 'styles/_colors.scss'; // assuming a styles directory under src/
#import '~nprogress/nprogress'; // importing a css file from the nprogress node module
Sass path variable
To use imports relative to a path you specify, and from node_modules without adding the ~ prefix, you can add a .env file at the project root with the variable SASS_PATH=node_modules:src. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3.

All the npm package not installed globally can't be executed directly

Symptom:
I can't execute the npm packages directly that are not installed globally. But I can execute it by npm scripts. How to fix it?
For example:
I installed gulp under the project:
npm install gulp --save-dev
Then I try to execute it by
gulp
zsh: command not found: gulp
But if I add a npm script to package.json:
"scripts": {
"test": "mocha --require intelli-espower-loader && gulp test",
"start": "gulp"
},
Then run
npm start
It can get executed without problem.
P.S.
Same issue with the mocha package, I can't execute mocha directly but I can execute npm test without problem.
Help Wanted:
What I can do to fix that issue?
Notice:
I'm not saying that I want to execute them globally, I just want to execute them under the project.
I don't know where goes wrong, but they are executable not long ago, just don't work recently!
In addition to #Ion's answer: You might need to add the path to the environment variables. In windows OS, it would be %AppData%\npm. For packages installed locally, you should be able to run them like
.\node_modules\.bin\gulp
If you want to execute them globally install with the -g flag
npm install gulp -g
To run directly you could also do ./node_modules/.bin/gulp
That is because the package not installed globally doesn't create a reference in the root node_modules folder . If you want to specifically use the local installed version to run globally on terminal then go to you environment variables and set the path to ./node_modules/gulp/bin/gulp.js or alternatively configure your npm to use the mentioned location as the gulp and execute node_modules/.bin/gulp
You have two choices:
Install the executable modules globally:
npm install -g gulp
This is good if it's a tool you use often (for many different projects). For gulp specifically, the globally installed gulp will also check to see if the project has its own gulp installed (in node_modules) and run that version of gulp. This means that each project can have its own version of gulp. But not all tools have this feature.
Use npx:
npx gulp
Newer versions of npm ships with a command called npx which will search through your project's node_modules directory to find a module to execute. This means you don't need to install project specific tools globally. Apart form avoiding global installs of commands (which may or may not be a security issue) it also allows you to install project specific versions of tools.
If your npm installation does not have npx you can install it from npm itself:
npm install -g npx

webpack keeps asking , Which one do you like to install(webpack-cli/webpack-command)

I just installed Webpack, using:
npm install -g webpack
I then run webpack from the command line without parameters:
webpack
Each time I do this.
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):
From webpack v4.0.0-alpha.1 the cli component is moved to another independant package called webpack-cli
CLI has been move to webpack-cli, you need to install webpack-cli to
use the CLI
From this github issue:
it was intentional to make webpack-cli not a dependency of webpack:
Less depenencies when only using the node.js API
Both projects can develop indiviually.
Breaking changes for webpack-cli doesn't mean breaking change for webpack and in reverse.
So, you just to install webpack-cli one time and it will work as expected.
Note: You can also install webpack-command
I had the same problem. I solved it by installing an older version of the webpack:
npm uninstall -g webpack
npm install -g webpack#3
For webpack 4 please use below command in the terminal:
npx webpack

webpack: command not found after npm install webpack -g

Weird behaviour on my OSX Yosemite: from one day to another all my node modules installed by npm install -g were not found via the Terminal.
I'm not sure if this is due to my node v4.0.0 install the day before.
Try this
echo $(npm config get prefix)/bin
you will get STRING, which should include to your .bash_profile such way
export PATH=$PATH:STRING
Install it globally
npm i -g webpack
If you will work with webpack, install webpack-dev-server too
npm i -g webpack-dev-server
After I Install this two command I also found errors when run the
webpack
command so I figure out the problem by changing the version of webpack so I Install
npm install webpack#2.1.0-beta.22
and every thing work fine for me.
I recommend you first learn a bit about npm and then webpack. You will struggle a lot. but finally you will find the right destination.
I've finally also used NVM for multiple NodeJS versions management and everything went back under control.
Webpack is in your ./node_modules/.bin/ folder so instead of giving just webpack as the command try this.
./node_modules/.bin/webpack
You have the npm bin command to get the folder where npm will install
executables.
You can use the scripts property of your package.json to use webpack
from this directory which will be exported.
"scripts": { "scriptName": "webpack --config etc..." } For example:
"scripts": { "build": "webpack --config webpack.config.js" } You can
then run it with:
npm run build Or even with arguments:
npm run build -- <args>
This allow you to have you webpack.config.js in the root folder of
your project without having webpack globally installed or having your
webpack configuration in the node_modules folder.

Resources