A Browsersync issue (I think?) in a clean install of 1.0.3

• Laravel Mix Version (npm list --depth=0): 1.0.3
• Node Version (node -v): 6.11.0
• NPM Version (npm -v): 3.10.10
• OS: macOS Sierra

Description:

To upgrade from 0.11.4 to 1.0.3, I did the following:

• Deleted /npm_modules/, mix-manifest.json, and webpack.config.js
• Renamed webpack.mix.js to webpack.mix-old.js
• Updated package.json to:

{
  "name": "...",
  "version": "0.0.0",
  "description": "...",
  "author": "...",
  "private": true,
  "devDependencies": {
    "laravel-mix": "^1.0.3"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  },
  "scripts": {
    "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

• Ran npm install, which ended with a few WARNs:

npm WARN extract-text-webpack-plugin@2.1.2 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN webpack-dev-server@2.5.0 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN webpack-dev-middleware@1.10.2 requires a peer of webpack@1 || ^2.1.0-beta || ^2.2.0-rc.0 but none was installed.

• Ran cp -r node_modules/laravel-mix/setup/webpack.mix.js ./ and copied over my existing configuration, which is:

mix.autoload({jquery: ['$', 'window.jQuery', 'jQuery']})
   .js('_js/app.js', 'public/lib/js')
   .sass('_scss/app.scss', 'public/lib/css')
   .options({
     processCssUrls: false
   })
   .sourceMaps()
   .browserSync({
     // Homestead instructions: https://gist.github.com/marcamos/415df7891d98eef0e5bc18120e3d80bb
     proxy: 'starter.dev',
     files: [
       'public/lib/css/app.css',  // Generated .css file
       'public/lib/js/app.js',    // Generated .js file
       // =====================================================================
       // You probably need only one of the below lines, depending
       // on which platform this project is being built upon.
       // =====================================================================
       'public/**/*.+(html|php)',                     // Generic .html and/or .php files [no specific platform]
       'laravel/resources/views/**/*.php',            // Laravel-specific view files
       'craft/templates/**/*.+(html|twig)',           // Craft-specific templates, as html and/or twig
       '+(snippets|templates)/default_site/**/*.html' // EE-specific snippets and/or templates
     ]
   });

• Then finally ran npm run watch, and got the following error:

> the-outfit-starter@0.0.0 watch /Users/marcamos/Projects/starter
> NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

Additional dependencies must be installed. This will only take a moment.
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm WARN extract-text-webpack-plugin@2.1.2 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN webpack-dev-middleware@1.10.2 requires a peer of webpack@1 || ^2.1.0-beta || ^2.2.0-rc.0 but none was installed.
npm WARN webpack-dev-server@2.5.0 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN browser-sync-webpack-plugin@1.1.4 requires a peer of webpack@^1 || ^2 || ^2.0.0-beta || ^2.1.0-beta || ^2.2.0-rc.0 but none was installed.
module.js:471
    throw err;
    ^

Error: Cannot find module 'browser-sync-webpack-plugin'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at module.exports (/Users/marcamos/Projects/starter/node_modules/laravel-mix/src/builder/webpack-plugins.js:66:33)
    at WebpackConfig.buildPlugins (/Users/marcamos/Projects/starter/node_modules/laravel-mix/src/builder/WebpackConfig.js:93:13)
    at WebpackConfig.build (/Users/marcamos/Projects/starter/node_modules/laravel-mix/src/builder/WebpackConfig.js:26:14)
    at Object.<anonymous> (/Users/marcamos/Projects/starter/node_modules/laravel-mix/setup/webpack.config.js:26:38)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)

npm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "watch"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! the-outfit-starter@0.0.0 watch: `NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the the-outfit-starter@0.0.0 watch script 'NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the the-outfit-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs the-outfit-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls the-outfit-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/marcamos/Projects/starter/npm-debug.log

…and it looks like the issue(s) have everything to do with Browsersync (as WARNed about earlier) … but I don’t know what to do to resolve this. Any tips?

[marcamos]

@ruchern Before @JeffreyWay commented a moment ago, I ran npm cache clean --force and it worked perfectly. Thank you!

@JeffreyWay Thanks for the commit!

[ruchernchong]

Delete package-lock.json and run npm install.

After which, run npm run watch and you will see something like “Downloading additional resources”.

It should be fixed by then.

I recommend letting Laravel-Mix do the installing of Browsersync rather than manually doing it.