npm run watch build in infinite loop

[eliphazbouye]

My app using symfony 7.3.0 with PHP 8.4.8 on my package.json :

"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.0",
"@hotwired/stimulus": "^3.0.0",
"@hotwired/turbo": "^7.1.1 || ^8.0",
"@symfony/stimulus-bridge": "^3.2.0 || ^4.0.0",
"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
"@symfony/webpack-encore": "^5.0.0",
"core-js": "^3.38.0",
"regenerator-runtime": "^0.13.9",
"webpack": "^5.74.0",
"webpack-cli": "^5.1.0"

When I run npm run watch I have the build in infinite loop without I change anything on my code :

 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:05 AM

 DONE  Compiled successfully in 25ms                                                                                                                                                                       3:32:05 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:05 AM

 DONE  Compiled successfully in 51ms                                                                                                                                                                       3:32:05 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:05 AM

 DONE  Compiled successfully in 51ms                                                                                                                                                                       3:32:06 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:06 AM

 DONE  Compiled successfully in 24ms                                                                                                                                                                       3:32:06 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:06 AM

 DONE  Compiled successfully in 24ms                                                                                                                                                                       3:32:06 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:06 AM

 DONE  Compiled successfully in 27ms                                                                                                                                                                       3:32:06 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                                        3:32:06 AM

 DONE  Compiled successfully in 24ms                                                                                                                                                                       3:32:06 AM

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.1 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.14 MiB app.css 49.3 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...

I don't know what going on here I follow the instruction of tailwind css guide to install tailwind css on symfony and I have this issue on running npm run watch. Can you know a way to fix it?

[Kocal]

Hi, maybe Webpack generates some files that are being watched by Webpack, and so it re-trigger a build.

What's your Encore configuration and full package.json?

I follow the instruction of tailwind css guide to install tailwind css on symfony

Which instructions are you following? Did you have this issue before trying to add TailwindCSS in your project?

[eliphazbouye]

I have what cause this issue it come when I enable this option from Encore on webpack.config.js:

.Encore
        .enablePostCssLoader()

my postcss.config.mjs:

export default {
    plugins: {
        "@tailwindcss/postcss": {},
    },
};

my full package.json

{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@hotwired/stimulus": "^3.0.0",
        "@hotwired/turbo": "^7.1.1 || ^8.0",
        "@symfony/stimulus-bridge": "^3.2.0 || ^4.0.0",
        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
        "@symfony/webpack-encore": "^5.0.0",
        "core-js": "^3.38.0",
        "regenerator-runtime": "^0.13.9",
        "webpack": "^5.74.0",
        "webpack-cli": "^5.1.0"
    },
    "license": "MIT",
    "private": false,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "@tailwindcss/postcss": "^4.1.8",
        "postcss": "^8.5.4",
        "postcss-loader": "^8.1.1",
        "tailwindcss": "^4.1.8"
    }
}

Which instructions are you following ?

This official guide from tailwind css documentation to add tailwind css on a symfony project : https://tailwindcss.com/docs/installation/framework-guides/symfony

Did you have this issue before trying to add TailwindCSS in your project?

No, I haven't tried it before adding Tailwind CSS.

[eliphazbouye]

When I comment @import "tailwindcss"; on app.css the compilation work, but when I enable it again I have the issue

[stof]

Can you share your full webpack.config.js to make it easier to debug things ?

[eliphazbouye]

Ok this is my webpack.config.js :

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or subdirectory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()

    // Displays build status system notifications to the user
    // .enableBuildNotifications()

    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // configure Babel
    // .configureBabel((config) => {
    //     config.plugins.push('@babel/a-babel-plugin');
    // })

    // enables and configure @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.38';
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    .enablePostCssLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

[thedevopser]

Hi

I have same problem. Have you found a solution ?

When I use the dev-server / watch option, I have an infinite loop

I have the same version as the author.

[Kocal]

I was able to reproduce it:

➜  webpack-encore-1374 git:(main) ✗ npm run watch

> watch
> encore dev --watch

Running webpack ...

 DONE  Compiled successfully in 776ms                                                                                                                                                         06:41:00

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:00

 DONE  Compiled successfully in 41ms                                                                                                                                                          06:41:00

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:00

 DONE  Compiled successfully in 29ms                                                                                                                                                          06:41:00

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:00

 DONE  Compiled successfully in 30ms                                                                                                                                                          06:41:00

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:00

 DONE  Compiled successfully in 27ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 25ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 25ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 25ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 28ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 25ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 26ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
 WAIT  Compiling...                                                                                                                                                                           06:41:01

 DONE  Compiled successfully in 21ms                                                                                                                                                          06:41:01

7 files written to public/build
Entrypoint app [big] 1.24 MiB = runtime.js 26.2 KiB vendors-node_modules_hotwired_turbo_dist_turbo_es2017-esm_js-node_modules_symfony_stimulus-br-7161ae.js 1.13 MiB app.css 43.8 KiB app.js 34.6 KiB
webpack compiled successfully
^C
➜  webpack-encore-1374 git:(main) ✗

Currently investigating

[Kocal]

This is caused by the new Tailwind 4 contents configuration, which by default watch every files in all folders from your project.
Since Webpack dev-server/watch mode will create files in public/build folder, like manifest.json, app.css etc... it triggers infinite compilations since Tailwind think we modified source code.

To fix it, you must use @source not "../../public"; to prevent Tailwind to listen the public directory. Note that the path is relative, using ../../public in assets/styles/app.css resolves to ./public.

Read more at https://tailwindcss.com/docs/detecting-classes-in-source-files

[Kocal]

Opened tailwindlabs/tailwindcss.com#2306