laravel-mix and webpack: command not found

I'm working on resurrecting an older Laravel application. My package.json is non-controversial:

{
  "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": {
    "axios": "^1.7.9",
    "bootstrap": "^5.3.3",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^3.5.13"
  }
}

When I run npm install, it installs properly. On the first npm run dev, I get:

    Additional dependencies must be installed. This will only take a moment.

    Running: npm install less-loader less --save-dev --legacy-peer-deps

    Finished. Please run Mix again.

So far so good. But when I run npm run dev again, I get:

> dev
> npm run development

> development
> mix

/bin/sh: webpack: command not found

But webpack is installed. It's an obvious dependency of laravel-mix itself, which one can see in package.lock.json:

   "webpack": "^5.60.0",
   "webpack-cli": "^4.9.1",
   "webpack-dev-server": "^4.7.3",
   "webpack-merge": "^5.8.0",
   "webpack-notifier": "^1.14.1",
   "webpackbar": "^5.0.0-3",

and, indeed, they are all in my node_modules.

All this is in the context of Laravel 5.8.38 and node 23.7.0.

So, what gives? How would one go around resolving this? Many thanks in advance.

TLDR;

1. Uninstall sass and sass-loader
npm uninstall sass sass-loader

2. Install webpack
npm install webpack --save-dev

3. Run mix
npm run dev

4. Re-run mix since step no.3 asks you to do so
npm run dev

My investigation

I was able to replicate your issue as shown in here.

I was able to confirm that package-lock.json included webpack, but if I manually install webpack, the following error occurs.

> npm install webpack --save-dev 

yutainoue@Yutas-MacBook-Air-2 blog % npm install webpack --save-dev 
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: sass-loader@7.3.1
npm error Found: webpack@5.98.0
npm error node_modules/webpack
npm error   dev webpack@"*" from the root project
npm error   peer webpack@"4.x.x || 5.x.x" from @webpack-cli/configtest@1.2.0
npm error   node_modules/@webpack-cli/configtest
npm error     @webpack-cli/configtest@"^1.2.0" from webpack-cli@4.10.0
npm error     node_modules/webpack-cli
npm error       peer webpack-cli@"4.x.x" from @webpack-cli/configtest@1.2.0
npm error       3 more (@webpack-cli/info, @webpack-cli/serve, laravel-mix)
npm error   14 more (babel-loader, css-loader, file-loader, html-loader, ...)
npm error
npm error Could not resolve dependency:
npm error peer webpack@"^3.0.0 || ^4.0.0" from sass-loader@7.3.1
npm error node_modules/sass-loader
npm error   dev sass-loader@"^7.1.0" from the root project
npm error
npm error Conflicting peer dependency: webpack@4.47.0
npm error node_modules/webpack
npm error   peer webpack@"^3.0.0 || ^4.0.0" from sass-loader@7.3.1
npm error   node_modules/sass-loader
npm error     dev sass-loader@"^7.1.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /.npm/_logs/2025-02-21T04_41_56_986Z-eresolve-report.txt
npm error A complete log of this run can be found in: /.npm/_logs/2025-02-21T04_41_56_986Z-debug-0.log

It seems like sass-loader was causing dependency issues, so I removed it by running npm uninstall sass sass-loader, and then finally re-run npm install.

When you run npm run dev, laravel mix will ask you to run again since they will try reinstalling sass and sass-loader.

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install sass-loader@^12.1.0 sass --save-dev --legacy-peer-deps
 
        Finished. Please run Mix again.

Go ahead and re-run npm run dev, and this time it should work since sass and sass-loader is using the compatible version with webpack.

If you are not sure this works, make a copy of the original package.json and package-lock.json file.

Hopefully this helps.

Regards