Module not found: Error: Can't resolve 'os' in

Question

I am working on a Laravel/Vue3 project. Suddenly I am getting 37 error messages when I run "npm run dev". 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.

The first few error messages (there are 37 in total:):

 npm run development


> @ development C:\xampp\htdocs\testBankjes
> 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 < 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: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": 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 < 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: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": 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 < 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: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

My package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.2.8",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^16.5.0"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.36",
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/vue-fontawesome": "^3.0.0-4",
        "bootstrap": "^5.1.1",
        "leaflet": "^1.7.1",
        "mitt": "^3.0.0",
        "vue": "^3.2.8"
    }
}

And my webpack.mix.js:

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', [
        //
    ]);

Many thnx for your help.

Hubert

Answer 1

In your app.js main file, look for some line of code like:

 import File from 'laravel-mix/src/File';

Remove that line of code and your work will compile successfully.