Upgrade to Tailwind 3 creates infinite loop in 'npm run watch'

[adrelliott]

Bit of a strange one - when I try to upgrade tailwind to 3.0, then run npm run watch the terminal window shows infinite rebuilding, and there is a 'cache' directory that appears and disappears in the root.

I tried it on the vanilla jigsaw build and the blog template, and it happened on both.

(On a MBP and not using anything like docker - if that helps)

I have a screen recording of this if it's any use.

[anatoliy-t7]

The problem is solved here https://github.com/laravel-mix/laravel-mix/issues/1942

[adrelliott]

Fantastic! Thanks!

On Thu, 20 Jan 2022 at 11:33, Anatoliy @.***> wrote:

The problem is solved here laravel-mix/laravel-mix#1942 https://github.com/laravel-mix/laravel-mix/issues/1942

— Reply to this email directly, view it on GitHub https://github.com/tighten/jigsaw/issues/607#issuecomment-1017334323, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWYPBIKVWQHXP65JVTOAH3UW7QHVANCNFSM5MJ4ACEQ . You are receiving this because you authored the thread.Message ID: @.***>

[horuskol]

Unfortunately for me, the solution at https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038 was only part of it.

I'm generating some intermediate markdown files into a temporary folder under source - and this was causing the Tailwind CSS JIT to loop, even with the above fix. Luckily, it wasn't too hard to adapt - the temporary files don't use any CSS utilities that don't already exists elsewhere:

module.exports = {
  content: require('fast-glob').sync([
    'source/**/*.{blade.php,md,html,vue}',
    '!source/**/_tmp/*' // exclude temporary files
  ],{ dot: true }),

[aboustayyef]

I've been having this problem with all my Jigsaw projects, and the solutions suggested here did not work for me... I did some further digging online and I read It has to do with the locations of the images and fonts (but I don't use fonts so images in my case). My problem is that I don't even know how to troubleshoot this...

[lukebouch]

@aboustayyef I have run into a similar issue in the past and I can't recall what I did to fix it. Are you able to let me see your repository and I will try to diagnose it?

[lukebouch]

@aboustayyef Try this: https://github.com/adrelliott/oblongloves/commit/aa70e63f2cb16b042b31b813988087f45a27e089

It worked for me. Don't forget to npm install fast-glob.

[aboustayyef]

Thanks @lukebouch... What I did is read this explanation in the Tailwind docs of why the issue takes place... I remember trying the fast-glob fix but it didn't work, so I ended up choosing more specific files in the config instead... But maybe I should give fast-glob another try...

[lukebouch]

@aboustayyef awesome! I would give fast-glob another try.

[adrelliott]

I write a mini-post about this in the discussion tab

Hope it's useful.

https://github.com/tighten/jigsaw/discussions/616

[aboustayyef]

Thanks. Good reference for the future 👍🏻

[walirazzaq]

For anyone who is still facing this issue with remote collections and doing all the above updates and trying solutions. you can try this in webpack.mix.js

//--- Tested and working for me.
mix.jigsaw({
 watch:{
    noDirs:[
        ''source/_assets/'', 
        'source/assets/',
        'source/_remote_collection_name/', // Explicitly list dirs for remote collections
    ]
   }
})

//----OR, maybe----
// Not tested, may work, not sure about negated pattern 😵‍💫
mix.jigsaw({
 watch:{
    dirs:['source/*/', '!source/**/_tmp']
   }
})