Can't compile sass using "npm run watch" - Laravel

Question

Ok. I'm taking a course on Laravel through udemy, and all the styling is done in sass. I followed the same steps as the instructor but I'm getting errors whereas his worked fine. Can someone please help. I'm on windows and he is on MAC

I installed Laravel using composer, then migrated my database tables.

The next thing we had to do was install node and stuff using

npm install

Here is where the problems lay. I did not get a node modules folder, whereas he did. To get a node modules folder I needed to run

npm install node-laravel But the folders contained different contents.

After i added sass folders into laravel, and to compile them he ran

npm run watch

SASS compiled perfectly for him, whereas I got this error

    > @ watch C:\Users\andre\Dropbox\Code\Personal\CodingPhase\PHP-7\DesignSt
orm
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --wa
tch --progress --hide-modules --config=node_modules/laravel-mix/setup/web
pack.config.js

The system cannot find the path specified.
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules\webpack\bin\webpack.js ENOENT

    at notFoundError (C:\Users\andre\AppData\Roaming\npm\node_modules\cro
ss-env\node_modules\cross-spawn\lib\enoent.js:11:11)
    at verifyENOENT (C:\Users\andre\AppData\Roaming\npm\node_modules\cros
s-env\node_modules\cross-spawn\lib\enoent.js:46:16)
    at ChildProcess.cp.emit (C:\Users\andre\AppData\Roaming\npm\node_modu
les\cross-env\node_modules\cross-spawn\lib\enoent.js:33:19)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:198
:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `cross-env NODE_ENV=development node_modules/webpack/bi
n/webpack.js --watch --progress --hide-modules --config=node_modules/lara
vel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additio
nal logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\andre\AppData\Roaming\npm-cache\_logs\2018-01-27T20
_14_57_489Z-debug.log

EDIT

This is the package.json

{

  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "nodejs": "0.0.0"
  }
}

Answer 1

npm install is the command that tells npm (Node Package Manager) to install the packages listed in package.json. The command npm install node-laravel tells npm to install the package node-laravel which is a "[...] Node.js library for inter-operating with Laravel.". Running npm install node-laravel is creating a node_modules folder because you're installing a package, but it's the wrong package: node-laravel is not what you're looking for.

The problem you're having is that npm install is not installing the dependencies listed in package.json so let's work through why that might be.

There are 2 types of dependencies listed in package.json, dependencies and devDependencies and as you can see from your package.json, all of your dependencies are in devDependencies. devDependencies are only installed when you're in a development environment, they are not installed in a production environment. This is (roughly) what happens:

1. You run npm install
2. npm installs everything listed in dependencies
3. npm determines what type of environment you're in
4. If you are in development npm will also install the packages listed in devDependencies

Your dependencies are listed as only nodejs so there is nothing for npm to install and therefore npm does not need to create a node_modules folder. Therefore, the problem you're having (npm is not installing packages listed in devDependencies) is most likely because npm believes you're in production.

There are 2 options:

1. You can keep you environment set to production and ask npm to install your devDependencies regardless by running npm install --only=dev
2. You can update your environment configuration to correctly set the environment to development by running npm config set -g production false then run npm install again

The second option is a solution to the problem, the first is a workaround. I recommend option 2.