Looping recompile with version 4 using laravel Mix

[cercos]

When I run "mix watch" it will cause a looping recompile. I am unsure if the issue is with Mix or Tailwind because there's not much info other than a successful compile. I've tried adding ignore paths and different options but always results in a loop. Below is my current file structure. Not sure if there's some other option I need now with version 4 that I may be missing.

style.scss
@use "tailwindcss";

tailwind.config.js

module.exports = {
    content: [
        './resources/**/*.{html,js,scss,css}',
        './templates/**/*.html',
        './resources/**/*.vue',
        './resources/**/*.jsx',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

postcss.config.js

module.exports = {
  plugins: [
    [
      "@tailwindcss/postcss",
    ],
  ],
};

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

// Compile JavaScript and SCSS
mix.js('resources/js/app.js', 'storage/compiled/js')
    .sass('resources/scss/style.scss', 'storage/compiled/css')
    .options({
        processCssUrls: false, // Prevent CSS URL reprocessing to avoid path issues
        postCss: [
            require('autoprefixer'),
        ],
    });

// Set public path
mix.setPublicPath(".");

// Create alias for cleaner imports
mix.alias({
    "@": path.resolve("resources/js/"),
});

// Handle webfonts and other assets
mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(woff2?|eot|ttf|otf|svg)$/, // Match font and SVG files
                type: 'asset/resource', // Handle fonts as resources
                generator: {
                    filename: 'storage/compiled/fonts/[name][ext]', // Output fonts to the compiled storage path
                },
            },
        ],
    },
});

// Copy FontAwesome webfonts to the correct directory to avoid errors
mix.copy(
    'node_modules/@fortawesome/fontawesome-free/webfonts',
    'storage/compiled/fonts'
);

// Versioning for production builds
if (mix.inProduction()) {
    mix.version();
}

// Disable compilation success notification
mix.disableSuccessNotifications();

[dalton-f]

I also am having this issue with Tailwind v4 and haven't found a work around for it just yet, I'd love to know if there's been any solutions discovered?

[cercos]

I also am having this issue with Tailwind v4 and haven't found a work around for it just yet, I'd love to know if there's been any solutions discovered?

My solution was to just use "mix" instead of watching but it became to much of a PITA doing it manually after every edit so i just reverted back to v3 for now.

[dalton-f]

I also am having this issue with Tailwind v4 and haven't found a work around for it just yet, I'd love to know if there's been any solutions discovered?

My solution was to just use "mix" instead of watching but it became to much of a PITA doing it manually after every edit so i just reverted back to v3 for now.

I might have a solution for you - adding

mix.webpackConfig({ watchOptions: { ignored: /node_modules|dist|mix-manifest.json/, }, });

to your webpack.mix.js may resolve the looping - I have found that there is a possibility that the manifest json is being updated and that change is detected causing a loop

[cercos]

I have found that there is a possibility that the manifest json is being updated and that change is detected causing a loop

I actually tried this previously and didn't fix it. Did it this fix it for you?

[dalton-f]

I have found that there is a possibility that the manifest json is being updated and that change is detected causing a loop

I actually tried this previously and didn't fix it. Did it this fix it for you?

For me this has seemed to resolve the issue, although I asked a friend and the code that I had without ignoring the manifest json actually worked on his machine, so I really don't know if there's something in my specific environment thats causing issues

[philipp-spiess]

Hey! Did this work in v3 with you? It would really help if you could set up a reproduction in a small repository that I can check out and run locally. However from a first glance this does involve quite a lot of configuration and webpack specific so I'm not sure we can help out a ton here.

[dalton-f]

Hey! Did this work in v3 with you? It would really help if you could set up a reproduction in a small repository that I can check out and run locally. However from a first glance this does involve quite a lot of configuration and webpack specific so I'm not sure we can help out a ton here.

Hey Phillip! I can set up a demo repository for what causes my looping - the same workflow I use for v3 does not cause this issue. My looping issue came from a much more simple/basic webpack setup that you can take a lot at, although I am unsure if you would be able to reproduce the problem - as I mentioned above, another developer used a zipped up demo project and could not get Laravel Mix to loop, but I can still create a repo if it helps you out! (or I can create a separate issue, since there is a lot more detail and config in the original post)

[ksascomm]

I'm also encountering this issue. @dalton-f are you also on a Mac Apple M1, and was the other developer using a Mac as well?

[dalton-f]

I'm also encountering this issue. @dalton-f are you also on a Mac Apple M1, and was the other developer using a Mac as well?

No, both developers were using WIndows. I don't think the OS should have any affect if webpack is detecting some random file change, did you try to ignore the mix-manifest.json?

[ksascomm]

Ah ok! Asked about OS considering your question regarding environment.

But, I did try to ignore mix-manifest.json, and even went as far adding manifest: false, in mix.options so to not even create the file. But the loop is still happening. It's not as immediate as before, as it stops for a moment after a successful compiling, before almost re-compiling and looping again.

[dalton-f]

Ah ok! Asked about OS considering your question regarding environment.

But, I did try to ignore mix-manifest.json, and even went as far adding manifest: false, in mix.options so to not even create the file. But the loop is still happening. It's not as immediate as before, as it stops for a moment at building (10%) 0/2 entries 1/2 dependencies 0/0 modules 0 active. After a moment it then loops.

That is strange - it seems we all have very similar problems for slightly different reasons, you could try ignoring the folder where your CSS is being compiled to, but other than that I have no clue why webpack is detecting changes

[kataroek]

this help me
in mix.options

manifest: false,
webpackConfig: {
  watchOptions: {
    ignored: ['/node_modules'],
  },
},

[ksascomm]

Thanks @dalton-f @kataroek. Had to tweak my syntax but ignored: ['./mix-manifest.json', './dist/'] , in addition to not generating a mix-manifest.json file works.

[cercos]

I also am having this issue with Tailwind v4 and haven't found a work around for it just yet, I'd love to know if there's been any solutions discovered?

My solution was to just use "mix" instead of watching but it became to much of a PITA doing it manually after every edit so i just reverted back to v3 for now.

I might have a solution for you - adding

mix.webpackConfig({ watchOptions: { ignored: /node_modules|dist|mix-manifest.json/, }, });

to your webpack.mix.js may resolve the looping - I have found that there is a possibility that the manifest json is being updated and that change is detected causing a loop

Revisited this and it does actaully solve it, I was mistyping manifest. Thank you!!