npm run dev/build fail after boost install

[Jaiieq]

Laravel Package Version

1.0.5

Laravel Version

12.21.0

PHP Version

8.4.8

Database Driver & Version

mysql Ver 8.0.42-0ubuntu0.24.04.1 for Linux on x86_64 ((Ubuntu))

Description

npm run build & npm run dev both fail after adding the boost pacakge and running the artisan install command.

Steps To Reproduce

As noted in the description, I ran composer require laravel/boost --dev then pa boost:install (I have artisan aliased). Then when trying to run npm run dev or npm run build they both fail. Running either of the previous npm commands worked fine before running pa boost:install. See attached screenshot. I have no idea what boost would have done to cause this.

And here is when running npm run dev

And here is the app.css, since it is referenced in the npm run dev error

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@custom-variant dark (&:where(.dark, .dark *));

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";

@theme {
    --font-sans: Inter, sans-serif;
    --color-cardinal-red: #ad0000;
    --breakpoint-max-screen: 1930px;

    --color-accent: var(--color-blue-500);
    --color-accent-content: var(--color-blue-600);
    --color-accent-foreground: var(--color-white);
}

/* @theme {
    --color-accent: var(--color-blue-500);
    --color-accent-content: var(--color-blue-600);
    --color-accent-foreground: var(--color-white);
  } */
  
@layer theme {
    .dark {
        --color-accent: var(--color-blue-500);
        --color-accent-content: var(--color-blue-400);
        --color-accent-foreground: var(--color-white);
    }
}

/* Tailwind 4 make the default cursor, this makes it back to a pointer */
@layer base {
    button:not(:disabled),
    [role="button"]:not(:disabled) {
      cursor: pointer;
    }
   }
  
*:disabled, .disabled {
    cursor: not-allowed !important;
}
  
dialog::backdrop {
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 0, 0.7);

[s512]

Same issue here: npx vite is failing for me since installing boost (Laravel v12.21.0 / VITE v6.2.0 / npm 10.9.3)

[vite] Internal server error: [postcss] /path/resources/css/frontend.css:3011:5: Unknown word [

[markszymik]

Exactly the same here:

[plugin:vite:css] [postcss] /resources/css/app.css:9070:5: Unknown word [

Installed on two different projects (both using Flux Pro btw) and the same result.

[pushpak1300]

That’s strange.

we didn’t run into anything like this during testing. We’re looking into it.
Are you using any package manager other than npm?
It’d also help if you could share some system details so we can debug and pinpoint the issue
e.g., System info, PHP setup (Herd, Sail, or binary, etc.), and your Node package manager.

[abhi-conceptlz]

It's working fine,
php8. 4, Laravel 12.23

[Jaiieq]

That’s strange.

we didn’t run into anything like this during testing. We’re looking into it. Are you using any package manager other than npm? It’d also help if you could share some system details so we can debug and pinpoint the issue e.g., System info, PHP setup (Herd, Sail, or binary, etc.), and your Node package manager.

Setup is Ubuntu 24.04 via WSL on Windows 11. Just using composer and node.js npm package managers. Standard PHP binary installed with Ubuntu's package manager. I am also using Flux Pro in this project like @markszymik; May be some type of link there as to what is happening?

[NLDylan]

Also got this issue.
Laravel 12+ starterkit with livewire.
Using Flux Pro.
Using Herd on Mac book pro Max.

I use the cursor option for laravel boost.
Might be that the mcp.json or the rules folder is getting included in the build step?

Also get this when running npm run build.

> build
> vite build

vite v6.2.0 building for production...
✓ 3 modules transformed.
rendering chunks (1)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:2:222336:
      2 │ ...oading-indicator]{opacity:1}:is(){border-inline-end-style:var(--...
        ╵                                    ^


public/build/manifest.json              0.27 kB │ gzip:  0.15 kB
public/build/assets/app-UY2Uf13J.css  256.02 kB │ gzip: 35.65 kB
public/build/assets/app-BGdYblrW.js    45.05 kB │ gzip: 16.28 kB
✓ built in 473ms

Let me know if i can test anything, for now i will remove the package since its preventing any build and giving errors when developing.

[Jaiieq]

That’s strange.

we didn’t run into anything like this during testing. We’re looking into it. Are you using any package manager other than npm? It’d also help if you could share some system details so we can debug and pinpoint the issue e.g., System info, PHP setup (Herd, Sail, or binary, etc.), and your Node package manager.

I just commented out the following line in my app.css...

@import '../../vendor/livewire/flux/dist/flux.css';

...and npm doesn't fail out; App looks like garbage now of course!

So, at least in my case (and potentially @markszymik and @NLDylan), it seems like the common thread is between boost, npm, and flux (pro).

[ashleyhindle]

Wow this is an odd one. My main test project has been Flux based, though free. @pushpak1300 and I are looking into this now 👍

[s512]

I'm using flux free and for me removing the tailwindcss import fixes the build.

Mac / Herd / Livewire / tailwind 4

[ashleyhindle]

I'm using flux free and for me removing the tailwindcss import fixes the build.

Mac / Herd / Livewire / tailwind 4

Fancy jumping on a Google Meet @s512 ? I'm using this exact setup and npm run build, annoyingly, works perfectly fine 😁

If so, can you email me ashley.hindle@laravel.com saying howdy?

[Jaiieq]

I'm using flux free and for me removing the tailwindcss import fixes the build.

Mac / Herd / Livewire / tailwind 4

This "works" as well. You can comment out either the tailwindcss or flux part and npm will run fine. However, obviously, you lose all styling so it is does not fix the underlying issue.

[ashleyhindle]

Managed to pair with @s512 and we found the bug. I've released a new version, can you composer update -> boost:install, and retry? 🙏