Inštalácia Laravel Breeze podľa jeho dokumentácie sa včera nečakane zvrtla, keďže som v ekosystéme Laravelu niečo také nečakal. Problém však súvisí s javascriptovou a npm stranou veci, kde je najpríčetnejší prístup dúfať v najlepšie a čakať to najhoršie - pozrime sa teda, čo sa stalo.

Laravel Breeze #

Z dokumentácie:

Laravel Breeze je minimálna, jednoduchá implementácia všetkých autentifikačných funkcií Laravelu vrátane prihlásenia, registrácie, resetovania hesla, overenia e-mailu a potvrdenia hesla. Predvolená vrstva zobrazení Laravel Breeze sa skladá z jednoduchých Blade šablón štylizovaných pomocou Tailwind CSS. Breeze poskytuje skvelý štartovací bod pre začatie novej Laravel aplikácie.

Môže sa hodiť. Postup na reprodukovanie problému v tomto bode, za predpokladu, že aplikácia beží cez Sail:

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

Doteraz žiadne problémy. Príkaz, kde problémy začínajú:

pnpm run dev

Skript sa opýta nasledovné:

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

Po odpovedi “yes” sa príkaz zastaví po sekunde:

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'

Nainštalujte spomínané vývojové závislosti a začnite odznova:

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

Po ďalšom “yes” sa príkaz tentoraz zasekol s iným chýbajúcim balíkom:

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

Myslel som si, že inštalácia tohto rovnakým spôsobom ako vyššie postačí, pozrime sa:

pnpm install -D postcss-loader
pnpm run dev

Nie. Chyba je teraz záhadná:

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? }

Čo teraz?

Riešenie #

Po nejakom hľadaní som zistil, že tento problém nedávno zažili aj iní. Bez zdokumentovaného riešenia som skúsil downgrade balíka css-loader. Po pohľade do package.json bol na pomerne čerstvo povýšenej hlavnej verzii ^6.0.0, čo naznačuje možný problém. Upravte package.json buď manuálne:

"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"
}

Alebo príkazom (manuálna úprava vyššie je tu preferovaná) a začnite ešte raz odznova:

pnpm install css-loader@5 # <-- preskočte pri manuálnej úprave
pnpm run dev

Webpack teraz úspešne skompiluje Laravel Mix. Stále sú tu niektoré sťažnosti na chýbajúce peer závislosti:

 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

Celkovo to však bez ďalších príznakov funguje. Dúfam, že nájdem vhodné miesto, kde tento problém nahlásiť.