Laravel-mix: A Browsersync issue (I think?) in a clean install of 1.0.3

Created on 21 Jun 2017  路  9Comments  路  Source: JeffreyWay/laravel-mix
  • 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 [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] 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:
> [email protected] 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 [email protected]: Use uuid module instead
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@1 || ^2.1.0-beta || ^2.2.0-rc.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] 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! [email protected] 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 [email protected] 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

鈥nd it _looks_ like the issue(s) have everything to do with Browsersync (as WARNed about earlier) 鈥β燽ut I don't know what to do to resolve this. Any tips?

picture marcamos
👍1

Most helpful comment

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

@JeffreyWay Thanks for the commit!

picture marcamos on 22 Jun 2017
🎉2 ❤1

All 9 comments

I see, now, that doing everything above has _changed_ my package.json file (on its own) to the following:

{
  "name": "...",
  "version": "0.0.0",
  "description": "...",
  "author": "...",
  "private": true,
  "devDependencies": {
    "browser-sync": "^2.18.12",
    "browser-sync-webpack-plugin": "^1.1.4",
    "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"
  }
}

鈥here devDependencies has been updated to include the browser-sync related packages. Is NPM telling me that it can't find a package that it itself inserted into package.json?

marcamos picture marcamos on 21 Jun 2017

I have the same issue after upgrading to laravel-mix 1.0.3. I added "webpack": "^2.6.1" as an explicit dependency to my devDependencies to fix this.

jkudish picture jkudish on 22 Jun 2017

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.

ruchern-chong picture ruchern-chong on 22 Jun 2017
👍2

Update: I saw that 1.0.4 was just released, so I've tried again, repeating all of the steps from above. I still get the same issue, with slightly different warns than above:

npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.

鈥nd the output _after_ running npm run watch is now:

> [email protected] 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 [email protected]: Use uuid module instead
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] 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:67: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! [email protected] 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 [email protected] 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

鈥nd finally, if it helps to know, _after_ running npm run watch, Mix changed my package.json file to the following (where devDependencies got two browser-sync related entries):

{
  "name": "...",
  "version": "0.0.0",
  "description": "...",
  "author": "...",
  "private": true,
  "devDependencies": {
    "browser-sync": "^2.18.12",
    "browser-sync-webpack-plugin": "^1.1.4",
    "laravel-mix": "^1.0.4"
  },
  "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"
  }
}

@ruchern There are two package-lock.json files in this codebase, located in:

  • /node_modules/json-schema-traverse/package-lock.json
  • /node_modules/esrecurse/package-lock.json

鈥re you suggesting I delete one/both of _these_?

marcamos picture marcamos on 22 Jun 2017

@marcamos Regarding those inside node_modules, I honestly have no idea if you should delete the lock files.

How about trying npm cache clean --force?

ruchern-chong picture ruchern-chong on 22 Jun 2017

@marcamos - It'll work if you run npm run dev again.

I've just pushed a commit that makes it clear that you need to re-run the command after installing all the BrowserSync dependencies the first time.

JeffreyWay picture JeffreyWay on 22 Jun 2017
👍1

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

@JeffreyWay Thanks for the commit!

marcamos picture marcamos on 22 Jun 2017
🎉2 ❤1

My problem is "Additional dependencies must be installed. This will only take a moment.".
I waited a long time but nothing happend.
Finally i used 'npm install browser-sync-webpack-plugin browser-sync --save-dev' and finally ok.

wonder-wu picture wonder-wu on 13 Dec 2017
👍1

@wonder-wu Your version and OP's version are different. The Browsersync feature was changed through the progression of Laravel Mix.

ruchern-chong picture ruchern-chong on 13 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rderimay picture rderimay  路  3Comments
Micaso picture Micaso  路  3Comments
sdebacker picture sdebacker  路  3Comments
mementoneli picture mementoneli  路  3Comments
wendt88 picture wendt88  路  3Comments