Installing Laravel Breeze following its documentation yesterday made a sudden turn downwards, as I did not expect that to happen in the Laravel ecosystem. However, the problem is connected to the javascript and npm side of the coin, where hoping for the best and expecting the worst is the sanest approach, lets look at what happened.

Laravel Breeze

From the documentation:

Laravel Breeze is a minimal, simple implementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation. Laravel Breeze's default view layer is made up of simple Blade templates styled with Tailwind CSS. Breeze provides a wonderful starting point for beginning a fresh Laravel application.

Might come handy. Steps to reproduce the problem at this point, assuming the app is running via Sail:

composer require laravel/breeze --dev
php artisan breeze:install
pnpm install

Up to this point, no problems appear. The command where the problems start:

pnpm run dev

The script asks the following:

We will use "pnpm" to install the CLI via "pnpm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes

Answering "yes" the command however hangs after a second:

ERROR in /js/app
Module not found: Error: Can't resolve 'babel-loader' in '/home/peterbabic/work/laravel-app'

ERROR in /js/app
Module not found: Error: Can't resolve 'css-loader' in '/home/peterbabic/work/laravel-app'

Install the mentioned dev dependencies and start over:

pnpm install -D babel-loader css-loader
pnpm run dev

After another "yes", this time the command hang with a different missing package:

ERROR in /js/app
Module not found: Error: Can't resolve 'postcss-loader' in '/home/peterbabic/work/laravel-app'

I thought that installing this one the same way as the above two would suffice, lets look at it:

pnpm install -D postcss-loader
pnpm run dev

Nope. The error now is cryptic:

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }

What to do now?

Solution

After some searching, I have found that other people recently experienced this problem too. Without a documented solution, I tried downgrading the css-loader package. Looking into package.json, it was at the quite freshly bumped major version ^6.0.0, hinting at a possible problem. Edit package.json either manually:

"devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "alpinejs": "^2.7.3",
    "autoprefixer": "^10.1.0",
    "axios": "^0.21",
    "babel-loader": "^8.2.2",
-   "css-loader": "^6.0.0",
+   "css-loader": "^5.0.0",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.2.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^6.1.1",
    "tailwindcss": "^2.0.2",
    "webpack-cli": "^4.7.2"
}

Or via command a line (manual edit above preferred here) and start over one more time:

pnpm install css-loader@5 # <-- skip this when editing manually
pnpm run dev

The webpack compiles Laravel Mix successfully now. There are still some complains about missing peer dependencies:

 WARN  [email protected] requires a peer of webpack@^4.27.0 || ^5.0.0 but none was installed.
 WARN  [email protected] requires a peer of @babel/core@^7.0.0 but none was installed.
 WARN  [email protected] requires a peer of webpack@>=2 but none was installed.
 WARN  laravel-mix > webpack-cli: @webpack-cli/[email protected] requires a peer of webpack-dev-server@* but version 4.0.0-beta.3 was installed.
 WARN  laravel-mix: [email protected] requires a peer of webpack-dev-server@* but version 4.0.0-beta.3 was installed.
 WARN  4 other warnings

But overall it works without any other symptoms so far. Hopefully I now find some proper place to report this issue.