I ran the following command for my node app:
$ npm install browser-sync --save-dev
Installation was successful, browser-sync appears in my package.json file as well as my node_modules directory.
However, when I run $ browser-sync --version to check that it's working, I get the following error:
bash: browser-sync: command not found
Why isn't this working?
Note: this question is similar, but I don't want to have to install it globally as in this question.
Any help would be greatly appreciated!
This is because you're trying to use a module locally which is normally installed globally. Modules installed globally end up on your PATH environment variable, which is why you can run them from the terminal as you're trying to do:
$ browser-sync --version
If you want to use the browser-sync module from a local install you will have to prepend the full path to the browser-sync binary from within your .bin directory since all locally installed modules are placed within your current working directory node_modules directory. i.e. Node modules go in ./node_modules, executables go in ./node_modules/.bin/. So in order to run the browser-sync binary from a local install do the following:
./node_modules/.bin/browser-sync --version
Hopefully that helps!
If you installed browser-sync using npm --save or npm --save-dev you can run it by writing a script in your package.json. Here's an example of a script I added:
{
...
"scripts": {
"dev-server": "browser-sync start --server 'public' --files 'public'"
},
...
}
You can run the scripts from you project's root directory like so
npm run dev-server
This will run whatever command is set to dev-server in your script. In this case it will run browser-sync for the app/site in a folder called /public and watch for any file changes in the /public folder. I know this question is a bit old but it was unanswered and hopefully I can save someone time in the future.
The other answers still work, but a newer approach has emerged since npm added the npx command: npx <package-name>.
This command allows you to run an arbitrary command from an npm
package (either one installed locally, or fetched remotely), in a
similar context as running it via npm run.
Source: https://docs.npmjs.com/cli/v8/commands/npx
In this case, you would run npx browser-sync.
I'm trying to run grunt but receiving this error. I have grunt installed globally and can run 'grunt watch' from other locations and it works for other files. I have a new project given to me which has less files, and it contains a package.json file (this seems buried, where I'd assume it should be closer to the root but I'm new to this). I try to run grunt watch from the root and receive the error message above. The package.json does not list grunt files as dependencies. Any help is appreciated. Thanks
The error is telling you that it's missing locally. npm scripts run things out of the node_modules directory, so install grunt locally to resolve it.
npm install grunt --save-dev
I am new to nodejs and gulp stuff. I working on a nodejs project in which I have to run jslint on all the files. I am using gulp for this purpose.
My problem is that In order to run gulp on cli I don't want to install gulp globally and also does not want to update my path variable, So I have installed gulp and other node modules in my project locally using the package.json file
cd myproject
npm install
Since I don't want to install gulp globally and want to run the local gulp I have added script in my package.json file like this as given in this question
{
"name": "",
"version": "1.0.0",
"main": "index.js",
"private": true,
"dependencies": {
"async": "1.5.0"
},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-jslint": "^0.2.2"
},
"scripts": {
"gulp": "./node_modules/.bin/gulp" // is this correct?
}
}
Add added a gulpfile.js inside my myproject folder
var gulp = require('gulp');
// include plug-ins
var jslint = require('gulp-jslint');
// JS hint task
gulp.task('lint', function() {
gulp.src('./common/srp/*.js')
.pipe(jslint())
.pipe(jslint.reporter('default'));
});
gulp.task("default", ["lint"]);
But now on my command line inside myproject folder, when I run gulp and gulp lint I get an error
user1-VirtualBox:~/myproject$ gulp lint
/usr/local/node-v0.10.26-linux-x64/bin/gulp No such file or
directory
Its looking for gulp in the global node module.
Is there a way to make gulp run on cli without installing globally and updating PATH variable.
Any help will be appreciated
Thanks
You can find any executable installed by npm in node_modules/.bin. So you can run gulp locally using:
./node_modules/.bin/gulp
You can find more information at no command 'gulp' found - after installation
With your code you should be able to run command
npm run gulp
Please try
One way to define script is
"scripts": {
"gulp": "gulp"
}
If in case you are not able to run gulp command in your project, run
npm link gulp
It will link your global install gulp with your local project. Then try
gulp -v
If it is showing you the version then you are done. Now you can run any gulp command as you want.
Scripts defined in package.json are accessed through NPM, i.e. npm run-script gulp. I imagine you're trying to run plain old gulp, which should fail since you didn't install it globally.
The scripts section won't automatically create an alias, which I think is your mistake here. You could define one yourself or create a simple bash script if you don't want to type it every time.
Try:
path_to_node path_to_gulp_js gulp_task
Example:
node\node.exe node_modules\gulp\bin\gulp.js build
Like #snorberhuis said. The only way for me to get gulp to work globally was to call gulp manually
I am building in a Jenkins environment
Execute Windows Batch Command
cd your-app
npm install gulp
Execute Windows Batch Command
cd your-app\node_modules\.bin
gulp
Just another alternative that will work locally but will give you global like feeling.
Add to your shell config i.e. ~/.bash_profile the following
export PATH=$PATH:./node_modules/.bin
you have to source that file, execute rehash or just open a new shell and then gulp (and any other script inside that folder) shall be available as a global command.
The way I did this after bashing my head every possible place is simply going to your Application and install npm dependencies like this:
1- E:\webra-jenkins\Code\trunk\WebRa.Web>npm install
Once npm installed then go this directory
2- [%Application_path%]\node_modules\.bin
And execute the gulp and give your file/task, like this:
3-[%Application_path%]\node_modules\.bin>gulp gulpfile --tasks
In my case as I saw the following lines... I got the inner happiness
18:06:36] Working directory changed to [%Application_path%]
[18:06:37] Tasks for [%Application_path%]\gulpfile.js
Now you can run your tasks 1 by one.
[%Application_path%]\node_modules\.bin>gulp pack-vendor-js
Check in your project node_modules/.bin folder and make sure gulp is in there. I had a case where it wasn't there that I never tracked down the reason for. If it isn't there, try re-installing gulp locally and see if it shows up. If that doesn't work and you get tired of the problem, the gulp-cli package will fix it for sure, but that shouldn't be something you have to do.
The simplest solution I know of is to use npm bin:
`npm bin`/gulp ...
This keeps you away from hard-coding any paths.
Nothing was working for me. I followed all instructions from everyone. No matter what I did I could not run the Gulp commands.
To fix this I opened the Node.js command prompt that comes installed automatically when you download and run node.js.
Once I was in this command prompt I could run the following commands:
npm install -g gulp
gulp -v
This is probably a matter of common knowledge but as someone starting out no one suggested to run the node.js command prompt and install gulp from there. Everything I read talked about regular powershell or command prompts with elevated permissions.
Globally install gulp in C:\Users\%USERNAME% using this command
npm install –g gulp
You can install any other gulp methods you need to use.. Ex:
npm install -g gulp-concat
npm install -g gulp-uglify
npm install -g gulp-replace
Then at the directory you wish to use GULP. Open the command prompt (Shift + RightClick) then install locally and you'll be able to execute gulp.
npm install gulp
You can install any other gulp methods you need to use.. Ex:
npm install gulp-concat
npm install gulp-uglify
npm install gulp-replace
I'm just getting started with webpack and am having difficulty getting the multiple-entry-points sample to build. The webpack.config.js file in the example includes the line
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
which fails for me with the error
Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin'
Searching around, I found other examples of using the CommonsChunkPlugin with the expression
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");
which fails with the error
ReferenceError: webpack is not defined
Some more searching found a number of examples including
var webpack = require('webpack');
and my build now fails with
Error: Cannot find module 'webpack'
I'm at a loss as to how to proceed.
Link globally installed package to your project:
npm link webpack
Checkout the official documentation of yarn link.
I solved the same problem by reinstalling, execute these commands
rm -rf node_modules
rm -f package-lock.json
npm install
rm is always a dangerous command, especially with -f, please notice that before executing it!!!!!
While working on windows, I've installed webpack locally and it fixed my problem
So, on your command prompt, go to the directory of which you want to run webpack, install webpack locally (without the -g) and enjoy...
Run below commands in Terminal:
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
Seems to be a common Windows problem. This fixed it for me:
Nodejs cannot find installed module on Windows?
"Add an environment variable called NODE_PATH and set it to %USERPROFILE%\Application Data\npm\node_modules (Windows XP), %AppData%\npm\node_modules (Windows 7), or wherever npm ends up installing the modules on your Windows flavor. To be done with it once and for all, add this as a System variable in the Advanced tab of the System Properties dialog (run control.exe sysdm.cpl,System,3)."
Note that you can't actually use another environment variable within the value of NODE_PATH. That is, don't just copy and paste that string above, but set it to an actual resolved path like C:\Users\MYNAME\AppData\Roaming\npm\node_modules
I was having this issue on OS X and it seemed to be caused by a version mismatch between my globally installed webpack and my locally installed webpack-dev-server. Updating both to the latest version got rid of the issue.
I was facing same problem, and I solved through this command, check this out will solve your issue.
rm -Rf node_modules
rm -f package-lock.json
npm install
Installing both webpack and CLI globally worked for me.
npm i -g webpack webpack-cli
If you have installed a node package and are still getting message that the package is undefined, you might have an issue with the PATH linking to the binary. Just to clarify a binary and executable essentially do the same thing, which is to execute a package or application. ei webpack... executes the node package webpack.
In both Windows and Linux there is a global binary folder. In Windows I believe it's something like C://Windows/System32 and in Linux it's usr/bin. When you open the terminal/command prompt, the profile of it links the PATH variable to the global bin folder so you are able to execute packages/applications from it.
My best guess is that installing webpack globally may not have successfully put the executable file in the global binary folder. Without the executable there, you will get an error message. It could be another issue, but it is safe to say the that if you are here reading this, running webpack globally is not working for you.
My resolution to this problem is to do away with running webpack globally and link the PATH to the node_module binary folder, which is /node_modules/.bin.
WINDOWS:
add node_modules/.bin to your PATH.
Here is a tutorial on how to change the PATH variable in windows.
LINUX:
Go to your project root and execute this...
export PATH=$PWD/node_modules/.bin:$PATH
In Linux you will have to execute this command every time you open your terminal. This link here shows you how to make a change to your PATH variable permanent.
On windows, I have observed that this issue shows up if you do not have administrative rights (i.e., you are not a local administrator) on the machine.
As someone else suggested, the solution seems to be to install locally by not using the -g hint.
for me, it is a wrong error feedback.
there was config error in webpack.config.js,
delete the file and start over solved my issue
Open npm command prompt and -- cd solution folder
and then
just run npm link webpack in NPM cmd prommt and re build..
You can try this.
npm install --only=dev
It works for me.
In my case helped me changing the parent folder name and remove some & from this name, you can also try changing the name or folder where you keep your code.
Nothing suggested above worked for me (including the NODE_PATH variable). I created a sym link of "node_modules" from my local folder to the global AppData(eg below) and it worked like charm.
C:\Users\mmoinuddin\AppData\Roaming\npm>mklink /D node_modules c:\essportreact\day1\node_modules
symbolic link created for node_modules <<===>> c:\essportreact\day1\node_modules
C:\essportreact\day1>webpack
Hash: 2a82a67f90f9aa05ab4a
Version: webpack 1.15.0
Just found out that using Atom IDE terminal did not install dependencies locally (probably a bug or just me). Installing git bash externally and running npm commands again worked for me
I had a ton of issues getting a very simple .NET Core 2.0 application to build in VS 2017. This is the error from AppVeyor, however it was essentially the same thing locally
(some paths omitted for security) :
Performing first-run Webpack build...
module.js:327
throw err;
EXEC : error : Cannot find module '......../node_modules/webpack/bin/webpack.js'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:140:18)
at node.js:1043:3
csproj(25,5): error MSB3073: The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 1.
Build FAILED.
I stumbled upon this question and answer, and I noticed my local instance also had the same warning sign over the {Project Root} -> Dependencies -> npm folder. Right clicking and hitting "Restore packages" got everything loaded up properly, and I was able to build successfully.
npm link webpack
worked for me.
My webpack configuration:
"webpack": "^4.41.2",
"webpack-dev-server": "^3.9.0",
"webpack-cli": "^3.3.10"
For Visual Studio users: Right click on the npm folder and "Restore Packages".
While the suggested solution (npm link webpack) worked locally, on my CI (GitHub actions) I had the same problem, and to resolve it I used:
npm i --save-dev webpack
Laravel Users
If none of the above options work for you, then you probably need to install Laravel-mix correctly. Here is how:
npm install laravel-mix --save-dev
Now create a webpack.mix.js file using this command:
touch webpack.mix.js
Add this code into your webpack.mix.js file:
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
You probably will also need to create a tailwind.config.js file using the command touch tailwind.config.js and then add this code ainto it:
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('#tailwindcss/forms')],
};
Finally run npm run dev
So there are quite few possible issues, in my case on windows:
I moved my project to a folder with an & in the name, which is fine for windows but it break npm. My solution was to remove the & from the name.
test&mocking -> test_and_mocking
What solved it for me was that the path to webpack.config was wrong in build.js
rm -rf node_modules
rm -rf package.json-lock
npm install --force or npm install --legacy-peer-deps
I've project to join so I cloned repo from git. I have installed npm install and then bower install, but when I try to run the app with grunt serve command, console returns this:
Loading "cdnify.js" tasks...ERROR
>> Error: Cannot find module 'chalk'
Running "serve" task
Running "clean:server" (clean) task
Running "wiredep:app" (wiredep) task
Warning: ENOENT, no such file or directory '/home/tomek/dev/mobilas/app/bower.json' Use --force to continue.
Aborted due to warnings.
The thing is, I shouldn't really change neither Gruntfile.js nor bower.json file.
Link I referenced in comment above fixed it for me... just had to run
npm install chalk
in the project directory as a work around until they get one of the grunt dependencies fixed.
Running below commands should fix your errors...
$cd /home/tomek/dev/mobilas
$rm -rf node_modules
$npm install
Now you should be able to run your app with $grunt serve command