After update to 2.12.6 npm run dev fails with error

[madsem]

Package

filament/forms

Package Version

2.12.6

Laravel Version

9.12.2 (with Jetstream)

Livewire Version

2.10.5

PHP Version

8.1.5

Bug description

Upgraded composer deps, currently running latest filament/forms package. When running npm run dev after upgrade it throws an exception:

/vendor/filament/forms/dist/module.esm.css The 'border-primary-600' class does not exist.

Steps to reproduce

No response

Relevant log output

npm run dev

> dev
> npm run development

> development
> mix

✖ Mix
  Compiled with some errors in 1.60s

warn - The RTL features in Tailwind CSS are currently in preview.
warn - Preview features are not covered by semver, and may be improved in breaking ways at any time.
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1638:3) /Users/madsem/Sites/valhalla/vendor/filament/forms/dist/module.esm.css The `border-primary-600` class does not exist. If `border-primary-600` is a custom class, make sure it is defined within a `@layer` directive.

  1636 | .is-focused .choices__inner,
  1637 | .is-open .choices__inner {
> 1638 |   @apply border-primary-600 ring-1 ring-inset ring-primary-600;
       |   ^
  1639 | }
  1640 | .choices__list {

    at processResult (/Users/madsem/Sites/valhalla/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/madsem/Sites/valhalla/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/madsem/Sites/valhalla/node_modules/postcss-loader/dist/index.js:140:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

[danharrin]

Please send your Tailwind config file.

[madsem]

@danharrin sure thing:

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require("tailwindcss");

module.exports = {
    darkMode: 'light',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                danger: colors.rose,
                primary: colors.sky,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },

    safelist: [
        'bg-primary-500',
        'bg-red-50',
        'bg-green-50',
        'text-success-500',
        'text-warning-500',
    ],

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

[danharrin]

Please also send your webpack.mix & main app.css file.

Also, try deleting the compiled CSS file and running npm run prod again.

[madsem]

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')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

@import '../../vendor/filament/forms/dist/module.esm.css';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.bg-primary-500 {
    background: #2182BF;
}

[x-cloak] { display: none !important; }

[madsem]

@danharrin same result,

deleted the compiled css file in public, ran npm run prod and got the same exception:

npm run prod

> prod
> npm run production

> production
> mix --production

✖ Mix
  Compiled with some errors in 15.00s

[BABEL] Note: The code generator has deoptimised the styling of /Users/madsem/Sites/valhalla/vendor/filament/forms/dist/module.esm.js as it exceeds the max of 500KB.

warn - The RTL features in Tailwind CSS are currently in preview.
warn - Preview features are not covered by semver, and may be improved in breaking ways at any time.
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1638:3) /Users/madsem/Sites/valhalla/vendor/filament/forms/dist/module.esm.css The `border-primary-600` class does not exist. If `border-primary-600` is a custom class, make sure it is defined within a `@layer` directive.

  1636 | .is-focused .choices__inner,
  1637 | .is-open .choices__inner {
> 1638 |   @apply border-primary-600 ring-1 ring-inset ring-primary-600;
       |   ^
  1639 | }
  1640 | .choices__list {

    at processResult (/Users/madsem/Sites/valhalla/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/madsem/Sites/valhalla/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/madsem/Sites/valhalla/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/madsem/Sites/valhalla/node_modules/postcss-loader/dist/index.js:140:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

[danharrin]

So strange, why does Tailwind think this class doesn't exist when its in your config, clearly?

[madsem]

it is! was working before without issues, only after running composer update this started to happen.

[danharrin]

A few other people have had this issue, and its just been a problem with their Tailwind config not having a primary color defined

[madsem]

It might be jetstream, for some reason Filament's colors are often not applied also and I have to add them to the safelist.

[danharrin]

const colors = require("tailwindcss");

needs to be

const colors = require("tailwindcss/colors");

[danharrin]

you can probably remove your safelist now lol

[madsem]

you can probably remove your safelist now lol

yeeesh hahaha, thanks @danharrin . I would not have figured that out :)

[danharrin]

today's lesson: if something feels wrong it probably is

how this has not thrown errors before now is bizarre to me lol

[madsem]

PS; yes, it works perfect now. I wonder why it was working before when I had this wrong the entire time lmao

[danharrin]

I only worked it out by pasting your code into my own and working out which bit broke it

[madsem]

All these colors all of a sudden.... lol Super weird that it was working before, I honestly thought it's something with Jetstream the entire time.

Removed safelist entirely, and all colors working now :D

[madsem]

Thanks again btw!

[danharrin]

All these colors all of a sudden.... lol

it probably looks good now 😂

[ericlbarnes]

I hit a similar error when following the installation into existing app: https://filamentphp.com/docs/2.x/forms/installation#existing-laravel-projects

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ReferenceError: colors is not defined

Reading it again, the docs actually mention it but that line is greyed out like it's not important so I missed it:

[danharrin]

@ericlbarnes good point, I'll make sure to focus that line too

[danharrin]

Done