title: Npm update or installing packages breaks the compiler
body: <p>I have a recent project that my working on it. 
  I installed a vue package and the npm compiler broke, it cant compile anymore. I tried with other packages and always happens the same (or updating).</p>
  
  <p>Error : <strong>npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.</strong></p>
  
  <p>Also in the github page : <strong>[DEPRECATED] Please use <a href="https://github.com/webpack-contrib/mini-css-extract-plugin" rel="nofollow noreferrer">https://github.com/webpack-contrib/mini-css-extract-plugin</a> Extracts text from a bundle into a separate file</strong></p>
  
  <p>This happens from nowhere. Friday this was working fine.</p>
  
  <p>Packages installed friday : purgecss , vue-instantsearch and algoliasearch.</p>
  
  <p>After the npm update : the command npm run watch works but the app.css file has JS in it, very weird. The npm run production no longer works.</p>
  
  <p>Error : </p>
  
  <pre><code>&gt; cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
  
  SyntaxError: Unexpected token � in JSON at position 0
      at JSON.parse (&lt;anonymous&gt;)
      at Object.parseSourceMapInput (C:\server\htdocs\myproject\node_modules\postcss\node_modules\source-map\lib\util.js:433:15)
      at new SourceMapConsumer (C:\server\htdocs\myproject\node_modules\postcss\node_modules\source-map\lib\source-map-consumer.js:17:22)
      at PreviousMap.consumer (C:\server\htdocs\myproject\node_modules\postcss\lib\previous-map.js:69:28)
      at new Input (C:\server\htdocs\myproject\node_modules\postcss\lib\input.js:93:22)
      at parse (C:\server\htdocs\myproject\node_modules\postcss\lib\parse.js:13:15)
      at new LazyResult (C:\server\htdocs\myproject\node_modules\postcss\lib\lazy-result.js:60:16)
      at Processor.&lt;anonymous&gt; (C:\server\htdocs\myproject\node_modules\postcss\lib\processor.js:138:12)
      at Processor.process (C:\server\htdocs\myproject\node_modules\postcss\lib\processor.js:117:23)
      at Function.creator.process (C:\server\htdocs\myproject\node_modules\postcss\lib\postcss.js:148:43)
      at OptimizeCssAssetsWebpackPlugin.processCss (C:\server\htdocs\myproject\node_modules\optimize-css-assets-webpack-plugin\src\index.js:73:21)
      at Object.processor (C:\server\htdocs\myproject\node_modules\optimize-css-assets-webpack-plugin\src\index.js:13:18)
      at C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:150:10
      at arrayEach (C:\server\htdocs\myproject\node_modules\lodash\_arrayEach.js:15:9)
      at forEach (C:\server\htdocs\myproject\node_modules\lodash\forEach.js:38:10)
      at OptimizeCssAssetsWebpackPlugin.process (C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:147:5)
      at C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:178:28
      at _next0 (eval at create (C:\server\htdocs\myproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:9:17)
      at eval (eval at create (C:\server\htdocs\myproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:25:1)
      at C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\index.js:321:9
      at step (C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\TaskRunner.js:87:9)
      at done (C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\TaskRunner.js:98:30)
      at tryCatcher (C:\server\htdocs\myproject\node_modules\bluebird\js\release\util.js:16:23)
      at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:547:31)
      at Promise._settlePromise (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:604:18)
      at Promise._settlePromise0 (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:649:10)
      at Promise._settlePromises (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:729:18)
      at Promise._fulfill (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:673:18)
      at Promise._resolveCallback (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:466:57)
      at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:559:17)
      at Promise._settlePromise (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:604:18)
      at Promise._settlePromise0 (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:649:10)
      at Promise._settlePromises (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:729:18)
      at Promise._fulfill (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:673:18)
      at Promise._resolveCallback (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:466:57)
      at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:559:17)
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the @ production script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>{
    "private": true,
    "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "lint": "eslint --fix --ext .js,.vue resources/js"
    },
    "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^1.2.17",
      "@fortawesome/free-brands-svg-icons": "^5.8.1",
      "@fortawesome/free-regular-svg-icons": "^5.8.1",
      "@fortawesome/free-solid-svg-icons": "^5.8.1",
      "@fortawesome/vue-fontawesome": "^0.1.6",
      "@inotom/vue-go-top": "^1.1.0",
      "algoliasearch": "^3.35.1",
      "axios": "^0.18.1",
      "bootstrap": "^4.3.1",
      "instantsearch.css": "^7.3.1",
      "jquery": "^3.4.1",
      "js-cookie": "^2.2.0",
      "popper.js": "^1.15.0",
      "sweetalert2": "^8.10.0",
      "v-tooltip": "^2.0.2",
      "vform": "^1.0.0",
      "vue": "^2.6.10",
      "vue-awesome-swiper": "^3.1.3",
      "vue-content-loader": "^0.2.2",
      "vue-foldable": "^1.0.0",
      "vue-fuse": "^2.1.2",
      "vue-i18n": "^8.11.2",
      "vue-instantsearch": "^2.6.0",
      "vue-lazyload": "^1.3.3",
      "vue-loading-overlay": "^3.2.0",
      "vue-lodash": "^2.0.2",
      "vue-meta": "^1.6.0",
      "vue-notification": "^1.3.20",
      "vue-observe-visibility": "^0.4.6",
      "vue-router": "^3.0.6",
      "vue-slider-component": "^3.0.42",
      "vue-slim-tabs": "^0.4.0",
      "vuelidate": "^0.7.4",
      "vuex": "^3.1.0",
      "vuex-router-sync": "^5.0.0"
    },
    "devDependencies": {
      "@babel/plugin-syntax-dynamic-import": "^7.2.0",
      "@babel/preset-env": "^7.4.4",
      "babel-eslint": "^10.0.1",
      "cross-env": "^5.2.0",
      "eslint": "^5.16.0",
      "eslint-config-standard": "^12.0.0",
      "eslint-plugin-import": "^2.17.2",
      "eslint-plugin-node": "^9.0.1",
      "eslint-plugin-promise": "^4.1.1",
      "eslint-plugin-standard": "^4.0.0",
      "eslint-plugin-vue": "^5.2.2",
      "extract-text-webpack-plugin": "^3.0.2",
      "glob-all": "^3.1.0",
      "laravel-mix": "^4.0.15",
      "laravel-mix-versionhash": "^1.0.7",
      "purgecss-webpack-plugin": "^1.6.0",
      "resolve-url-loader": "^2.3.1",
      "sass": "^1.20.1",
      "sass-loader": "^7.1.0",
      "vue-template-compiler": "^2.6.10",
      "webpack-bundle-analyzer": "^3.3.2"
    }
  }
  </code></pre>
  
  <p>if i remove the extract-text-webpack-plugin and install mini-css-extract-plugin :</p>
  
  <pre><code>C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:93
                                  throw err;
                                  ^
  
  Error: Cannot find module 'extract-text-webpack-plugin'
  Require stack:
  - C:\server\htdocs\myproject\node_modules\laravel-mix-versionhash\src\index.js
  - C:\server\htdocs\myproject\webpack.mix.js
  - C:\server\htdocs\myproject\node_modules\laravel-mix\setup\webpack.config.js
  - C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js
  - C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js
  - C:\server\htdocs\myproject\node_modules\webpack\bin\webpack.js
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
      at Function.Module._load (internal/modules/cjs/loader.js:690:27)
      at Module.require (internal/modules/cjs/loader.js:852:19)
      at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
      at Object.&lt;anonymous&gt; (C:\server\htdocs\myproject\node_modules\laravel-mix-versionhash\src\index.js:7:27)
      at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
      at Module.load (internal/modules/cjs/loader.js:815:32)
      at Function.Module._load (internal/modules/cjs/loader.js:727:14)
      at Module.require (internal/modules/cjs/loader.js:852:19)
      at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
      at Object.&lt;anonymous&gt; (C:\server\htdocs\myproject\webpack.mix.js:4:1)
      at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
      at Module.load (internal/modules/cjs/loader.js:815:32)
      at Function.Module._load (internal/modules/cjs/loader.js:727:14)
      at Module.require (internal/modules/cjs/loader.js:852:19)
      at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
      at Object.&lt;anonymous&gt; (C:\server\htdocs\myproject\node_modules\laravel-mix\setup\webpack.config.js:12:1)
      at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
      at Module.load (internal/modules/cjs/loader.js:815:32)
      at Function.Module._load (internal/modules/cjs/loader.js:727:14)
      at Module.require (internal/modules/cjs/loader.js:852:19)
      at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
      at WEBPACK_OPTIONS (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
      at requireConfig (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
      at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
      at Array.forEach (&lt;anonymous&gt;)
      at module.exports (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
      at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:71:45
      at Object.parse (C:\server\htdocs\myproject\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
      at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:49:8
      at Object.&lt;anonymous&gt; (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:366:3)
      at Module._compile (internal/modules/cjs/loader.js:959:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
    code: 'MODULE_NOT_FOUND',
  </code></pre>
  
  <p>webpack.mix.js</p>
  
  <pre><code>const path = require('path')
  const fs = require('fs-extra')
  const mix = require('laravel-mix')
  require('laravel-mix-versionhash')
  // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
  const PurgecssPlugin = require('purgecss-webpack-plugin')
  const glob = require('glob-all')
  
  mix
    .js('resources/js/app.js', 'public/dist/js')
    .sass('resources/sass/app.scss', 'public/dist/css')
  
    .disableNotifications()
  
  if (mix.inProduction()) {
    mix.versionHash()
  } else {
    mix.sourceMaps()
  }
  
  mix.webpackConfig({
    plugins: [
      // new BundleAnalyzerPlugin()
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, 'resources/js/**/*.vue'),
          path.join(__dirname, 'resources/js/**/*.js')
        ])
      }),
    ],
    resolve: {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        '~': path.join(__dirname, './resources/js')
      }
    },
    output: {
      chunkFilename: 'dist/js/[chunkhash].js',
      path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build')
    }
  })
  
  mix.then(() =&gt; {
    if (!mix.config.hmr) {
      process.nextTick(() =&gt; publishAseets())
    }
  })
  
  function publishAseets () {
    const publicDir = path.resolve(__dirname, './public')
  
    if (mix.inProduction()) {
      fs.removeSync(path.join(publicDir, 'dist'))
    }
  
    fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'))
    fs.removeSync(path.join(publicDir, 'build'))
  }
  
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/X5XL3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5XL3.png" alt="enter image description here"></a></p>