how to put modules in path after installing them via NPM - npm

I installed webpack and webpack-dev-server using NPM.
npm i webpack webpack-dev-server --save
I also did
npm link webpack webpack-dev-server
Now when I type webpack in the root of my project it says
'webpack' is not recognized as an internal or external command,
operable program or batch file.
I would hate it that everytime i install something I have to manually edit the path variable of my OS.
is there a better way of putting these utilities so that I can invoke them ... without editing my OS path variable?

is there a better way of putting these utilities so that I can invoke them ... without editing my OS path variable?
Yes, there is, npm i webpack -g

Related

Transpile with babel after npm install

I installed this package: https://github.com/feathersjs/feathers-authentication-local (question not related specifically to this package). This package's source code is in ./src, and npm run compile puts the babel-transpiled code into ./lib, which is the main entry point.
My question is, after I do npm install feathers-authentication-local, how does npm know that it needs to run npm run compile? I thought of putting a postinstall script in package.json, this package doesn't have that.
Regarding what is uploaded to npm when publishing, there are two fields in package.json, files and directories, which are used to specify what should be uploaded.
Take a look as well to "main" property, it points to the files that will be used when importing a module in your aplication so:
import foo from 'foo'
Will look into node_modules/foo/$(main) which in this case points to lib/
The package actually doesn't compile after install on client's machines, but it's probably compiled on the mantainer's machine and then published on NPM.
Compiling process is fired by the prepublish script in package.json.

Webpack command not found

I have installed webpack using
npm install -g webpack
and
npm install webpack
I also installed webpack-dev-server
npm install -g webpack-dev-server
After completion of installation, I ran the command webpack but, it shows below error
webpack: command not found
I am not getting what is the error.
Your webpack exists in ./node_modules/.bin/ folder . So you should execute this command :
./node_modules/.bin/webpack
Check out the answer in this thread .
webpack command not working
As a good practice is recommended to install webpack and webpack-dev-server locally, more info here.
yarn add webpack webpack-dev-server --dev
# or
npm install webpack webpack-dev-server --save-dev
Then you can add these lines to your scripts section in your package.json file.
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server --progress --colors"
}
and finally
npm start
npm run build
Note: You need to have a webpack.config.js in the root folder to make it run correctly.
I needed to manually install:
npm install --save-dev webpack-cli
I guess its needed so that Angular CLI actually understands the commands related to Webpack.
In ubuntu u can try sudo apt install webpack
If you want to use global installation, you can find webpack script in [node_installed_path]/lib/node_modules/webpack/bin/, you can use with absolute path, adding to PATH environment variable, or symbolic link, etc.
If you want to use local installation, find it in ./node_modules/.bin/.
I recommand using local installation (for same reason about babel).
You need to be in proper folder to run webpack command.
What I mean by proper folder is folder in which you placed your installed module and module's package.json file.
Cause you installed it with -g parameter it is installed globally and you should find it in: ./node_modules/.bin/webpack.
Best practice is to install modules per project ( folder in which is project) not globally.
webpack -v: webpack command not found
node -v: v16.14.2
npm -v: 8.5.0
Tried to install webpack globally or locally and a lot of other ways to fix this issue but failed, below solution fixed my case (my case is a little bit special, I reset the prefix as below)
npm config set prefix "C:\Program Files\nodejs\npm_modules"
Solution: add the folder path xxx/npm_modules/ which included webpack.cmd to the System variable Path
How to find the folder path xxx/npm_modules/ which included webpack.cmd?
npm config ls
webpack.cmd in folder npm_modules, you will need this path to be added to System variable Path

Problems while setting up vue-cli

I'm trying to install Vue-cli environemnt via NPM.
npm install --global vue-cli
After that I want to create project
vue init webpack my-project
And I get an error
'vue' is not recognized as an internal or external command,
operable program or batch file.
I've read some solutions, most of them concern changing
PATH to C:\Users{YourUser}\AppData\Roaming\npm
Didn't work for me. Can anyone help.
I follow these commands, It's work fine for me.
npm install -g vue-cli
npm install -g vue
Edit the System environment variables, and enter the following path, and if still having a problem just try to add a path in System User Variables
C:\Program Files\nodejs\node.exe;
C:\Users\{UserName}\AppData\Roaming\npm
Check vue installed in C:\Users{UserName}\AppData\Roaming\npm
yarn add #vue/cli-service
or
npm install #vue/cli-service
is what worked for me
Well, problem was solved by simply deleting everything related to vue-cli installed before. And re-installing vue-cli.
I have faced simillar issue and re-installing vue-cli didn't work for me. Strange thing is vue and vue-cli get installed successfully but once I tried to create project by using below command
vue init webpack myfirstproject
I get below error:
'vue' is not recognized as an internal or external command,operable program or batch file.
Tried various solutions but nothing worked for me. Please find my NPM and Node details below:
NPM version: 6.2.0
Node version: 8.7.0
Actually the issue was "vue-cli" is not supporting to my Node(8.7.0). It requires Node >=8.9. Once I upgraded my Node version. everything is working fine.
upgrading your Node version is the correct way to deal with this issue
I found this same issue with another possible problem. I had
create-react-app#1.5.2 installed globally
npm list -g --depth=0 will display your globals
I simply uninstalled create-react-app
npm uninstall create-react-app
Vue vue-cli-service now works as expected.
had the same issue, i deleted my node_modules and re-install and it worked
I had the same problem after searching a lot I found this solution:
You need to Add C:\Program Files\nodejs to your PATH environment variable. To do this follow these steps:
Use the global Search to go to "Environment Variables"
Click "Edit system environment variables"
Click "Environment Variables" in the dialog
In the "System Variables" box, search for Path and edit it to include C:\Program Files\nodejs.
You will have to restart any currently-opened command prompts before it will take effect.
I hope it works, good luck!
I was installing #vue/cli using yarn, i.e. I ran
yarn global add #vue/cli
Calling vue on windows did not work after the installation ('vue' is not recognized as an internal or external command)
What I needed to do was to add C:\Users\<MY USERNAME>\AppData\Local\Yarn\bin to path.
yarn global add #vue/cli did not work for me
So I removed using yarn global remove #vue/cli
Then I installed using npm install -g #vue/cli and its working fine.
1)Try to remove all the node files, npm and nvm files/folders.
2)Also, remove the PATH of node js and nvm from environment variables.
3)try commands:
node -v
npm -v
nvm -v
above commands only to make sure that all the entities related to node are uninstalled.
4) install node, and if necessary install nvm(optioal), then run command
npm install -g #vue/cli
above procedure proven to be useful for me. Just give it a try!
for Yarn -> need to install it:
npm install -g yarn
Installing Vue CLI Package:
yarn global add #vue/cli
To create project:
vue create project-name
To run:
yarn serve
Uninstalling:
yarn global remove #vue/cli
I follow "npm" package manager instead of "yarn" package manager console because yarn give me a problem while installing it;
command to install Vue CLI:
npm install -g #vue/cli
For to create Vue project:
vue create "project-name"
For to run Vue project:
npm run serve

webpack is not recognized as a internal or external command,operable program or batch file

I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder
1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.
webpack is not recognized as a internal or external command,operable program or batch file
Better solution to this problem is to install Webpack globally.
This always works and it worked for me. Try below command.
npm install -g webpack
As an alternative, if you have Webpack installed locally, you can explicitly specify where Command Prompt should look to find it, like so:
node_modules\.bin\webpack
(This does assume that you're inside the directory with your package.json and that you've already run npm install webpack.)
I had this issue for a long time too. (webpack installed globally etc. but still not recognized)
It turned out that I haven't specified enviroment variable for npm (where is file webpack.cmd sitting)
So I add to my Path variable
%USERPROFILE%\AppData\Roaming\npm\
If you are using Powershell, you can type the following command to effectively add to your path :
[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")
IMPORTANT : Don't forget to close and re-open your powershell window in order to apply this.
npm install -g webpack-dev-server will solve your issue
Try deleting node_modules in local directory and re-run npm install.
Maybe a clean install will fix the problem. This "command" removes all previous modules and re-installs them, perhaps while the webpack module is incompletely downloaded and installed.
npm clean-install
Add webpack command as an npm script in your package.json.
{
"name": "react-app",
"version": "1.0.0",
"scripts": {
"compile": "webpack --config webpack.config.js"
}
}
Then run
npm run compile
When the webpack is installed it creates a binary in ./node_modules/.bin folder. npm scripts also looks for executable created in this folder
Webpack CLI is now in a separate package and must be installed globally in order to use the 'webpack' command:
npm install -g webpack-cli
EDIT: Much has changed. Webpack folks do not recommend installing the CLI globally (or separately for that matter). This issue should be fixed now but the proper install command is:
npm install --save-dev webpack
This answer was originally intended as a "work-around" for the OPs problem.
We also experienced this problem and I like all the answers that suggest using a script defined in package.json.
For our solutions we often use the following sequence:
npm install --save-dev webpack-cli (if you're using webpack v4 or later, otherwise use npm install --save-dev webpack, see webpack installation, retrieved 19 Jan 2019)
npx webpack
Step 1 is a one-off. Step 2 also checks ./node_modules/.bin. You can add the second step as a npm script to package.json as well, for example:
{
...
"scripts": {
...
"build": "npx webpack --mode development",
...
},
...
}
and then use npm run build to execute this script.
Tested this solution with npm version 6.5.0, webpack version 4.28.4 and webpack-cli version 3.2.1 on Windows 10, executing all commands inside of a PowerShell window. My nodejs version is/was 10.14.2. I also tested this on Ubuntu Linux version 18.04.
I'd advise against installing webpack globally, in particular if you are working with a lot of different projects each of which may require a different version of webpack. Installing webpack globally locks you down to a particular version across all projects on the same machine.
npx webpack
It is worked for me. I'm using Windows 10 and I installed webpack locally.
For me it worked to install webpack separately. So simply:
$npm install
$npm install webpack
I'm not sure why this should be necessary, but it worked.
Just run your command line (cmd) as an administrator.
I've had same issue and just added the code block into my package.json file;
"scripts": {
"build": "webpack -d --progress --colors"
}
and then run command on terminal;
npm run build
you have to install webpack and webpack-cli in the same scope.
npm i -g webpack webpack-cli
or,
npm i webpack webpack-cli
if you install it locally you need to call it specifially
node_modules/.bin/webpack -v
Install WebPack globally
npm install --global webpack
I had this issue when upgrading to React 16.12.0.
I had two errors one regarding webpack and the other regarding the store when rendering the DOM.
Webpack Error:
webpack is not recognized as a internal or external command,operable program or batch file
Webpack Solution:
Close related VS Solution
Delete node_modules folder
Deleted package-lock.json
npm install
npm rebuild
Repeated this 2-3 times
Store Error:
Type Store<()> is not assignable to type Store<any, AnyAction>
Store Solution:
Suggestions to update my React version didn't fix this error for me, but irrespective I would recommend doing it.
My code ended up looking like this:
ReactDOM.render(
<Provider store={store as any}>
<ConnectedApp />
</Provider>,
document.getElementById('app')
);
As per this solution
This below-given commands worked for me.
npm cache clean --force
npm install -g webpack
Note - Run these commands as administrator. Once installed then close your command prompt and restart it to see the applied changes.
If you create a boilerplate folder for your JS projects so that you can use JS Modules, webpack and Babel are great tools.
Don't install webpack globally and after installing the most recent versions of both, your package.json file will be loaded up and ready to copy for future projects.
Make sure to delete the node_modules folder to decrease file size in your boilerplate folder and then to reinstall node_modules use npm install.
I forgot to run npm install and kept getting this error when trying to run my webpack dev-server until I realized I needed to run npm install to install node_modules and then it worked.
If you have just cloned a repo, you first need to run
npm install
The error your getting will be generated if you are missing project dependencies. The above command will download and install them.
I got the same error, none of the solutions worked for me, I reinstalled node and that repaired my environment, everything works again.
I also Face the same issue this command works for me
npm install --save-dev webpack
Try this folks, the cli needs to be updated to the latest version
npm install --save-dev #angular/cli#latest
credit goes go to R.Richards
https://stackoverflow.com/a/44526528/1908827
The fix for me was locally installing webpack as devDependency. Although I have it as devDependencies it was not installed in node_modules folder. So I ran
npm install --only=dev
Sometimes npm install -g webpack does not save properly. Better to use npm install webpack --save . It worked for me.
I had this same problem and I couldn't figure it out. I went through every line of code and couldn't find my error. Then I realized that I installed webpack in the wrong folder. My error was not paying attention to the folder I was installing webpack to.

babel-cli not working as expected

I had installed babel-cli globally using npm. And I had a script.js file which contains the ES6 code. When I tried to compile that using $babel script.js -o out.js, it just copy all the contains of the script.js to out.js.
As far I concern, it should convert all the ES6 code to ES5.
Even if I run the script.js file without any content, it should show "use strict"; in my out.js. But it shows an empty file. Unable to figure out whats wrong?
Moreover I am unable to understand why "https://www.npmjs.com/package/babel-cli" says to install babel-cli globally where as "https://babeljs.io/docs/setup/#babel_cli" says to install that locally.
When I installed babel-cli locally and try to compile the script.js file it simply shows
'babel' is not recognized as an internal or external command,
operable program or batch file.
This should answer your question worked for me.
https://github.com/babel/babel/issues/4066
or install babel-cli globally and try it works then.
First Go to main directory or open new terminal
step 1: go to main directory
open terminal or (type cd so that you can directly switch in main directory)
step 2 : npm install -g babel-cli
now successfully install babel cli in your machine
npm install -g babel-cli
It works.