title: Module not found: Error: Can't resolve 'os' in
body: <p>I am working on a Laravel/Vue3 project. Suddenly I am getting 37 error messages when I run &quot;npm run dev&quot;. I think it has to do with configuration of mix or webpack. But I am not an expert in this area. Most likely I made a simple error, but I am no able to find it.</p>
  <p>The first few error messages (there are 37 in total!):</p>
  <pre><code> npm run development
  
  
  &gt; @ development C:\xampp\htdocs\testBankjes
  &gt; mix
  
  i Compiling Mix
  ÔêÜ Mix: Compiled with some errors in 2.18s
  WARNING in ./node_modules/laravel-mix/src/Dependencies.js 138:16-37
  Critical dependency: the request of a dependency is an expression
  
  ERROR in ./node_modules/clean-css/lib/options/format.js 1:22-39
  Module not found: Error: Can't resolve 'os' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\options'
  
  BREAKING CHANGE: webpack &lt; 5 used to include polyfills for node.js core modules by default.
  This is no longer the case. Verify if you need this module and configure a polyfill for it.
  
  If you want to include a polyfill, you need to:
          - add a fallback 'resolve.fallback: { &quot;os&quot;: require.resolve(&quot;os-browserify/browser&quot;) }'
          - install 'os-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: { &quot;os&quot;: false }
  
  ERROR in ./node_modules/clean-css/lib/options/rebase-to.js 1:11-26
  Module not found: Error: Can't resolve 'path' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\options'
  
  BREAKING CHANGE: webpack &lt; 5 used to include polyfills for node.js core modules by default.
  This is no longer the case. Verify if you need this module and configure a polyfill for it.
  
  If you want to include a polyfill, you need to:
          - add a fallback 'resolve.fallback: { &quot;path&quot;: require.resolve(&quot;path-browserify&quot;) }'
          - install 'path-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: { &quot;path&quot;: false }
  
  ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js 1:9-22
  Module not found: Error: Can't resolve 'fs' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\reader'
  
  ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js 2:11-26
  Module not found: Error: Can't resolve 'path' in 'C:\xampp\htdocs\testBankjes\node_modules\clean-css\lib\reader'
  
  BREAKING CHANGE: webpack &lt; 5 used to include polyfills for node.js core modules by default.
  This is no longer the case. Verify if you need this module and configure a polyfill for it.
  
  If you want to include a polyfill, you need to:
          - add a fallback 'resolve.fallback: { &quot;path&quot;: require.resolve(&quot;path-browserify&quot;) }'
          - install 'path-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
          resolve.fallback: { &quot;path&quot;: false }
  </code></pre>
  <p>My package.json</p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;npm run development&quot;,
          &quot;development&quot;: &quot;mix&quot;,
          &quot;watch&quot;: &quot;mix watch&quot;,
          &quot;watch-poll&quot;: &quot;mix watch -- --watch-options-poll=1000&quot;,
          &quot;hot&quot;: &quot;mix watch --hot&quot;,
          &quot;prod&quot;: &quot;npm run production&quot;,
          &quot;production&quot;: &quot;mix --production&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@vue/compiler-sfc&quot;: &quot;^3.2.8&quot;,
          &quot;axios&quot;: &quot;^0.21&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.6&quot;,
          &quot;lodash&quot;: &quot;^4.17.19&quot;,
          &quot;postcss&quot;: &quot;^8.1.14&quot;,
          &quot;vue-loader&quot;: &quot;^16.5.0&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.36&quot;,
          &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.4&quot;,
          &quot;@fortawesome/vue-fontawesome&quot;: &quot;^3.0.0-4&quot;,
          &quot;bootstrap&quot;: &quot;^5.1.1&quot;,
          &quot;leaflet&quot;: &quot;^1.7.1&quot;,
          &quot;mitt&quot;: &quot;^3.0.0&quot;,
          &quot;vue&quot;: &quot;^3.2.8&quot;
      }
  }
  </code></pre>
  <p>And my webpack.mix.js:</p>
  <pre><code>const mix = require('laravel-mix');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel applications. By default, we are compiling the CSS
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.js('resources/js/app.js', 'public/js')
      .vue()
      .postCss('resources/css/app.css', 'public/css', [
          //
      ]);
  </code></pre>
  <p>Many thnx for your help.</p>
  <p>Hubert</p>