[SOLVED] Symfony Encore/webpack builds React changes but does not updates the output/public folder after second file change ahead

Symfony Encore/webpack builds React changes but does not updates the output/public folder after second file change ahead

Long history short, Im going to describe the error im facing in 3 steps:

when I ran npm run watch the webpack (instaled from symfony encore) builds the changes from my react file (App.jsx), creates the output folder and it works Well on browser so always seems ok, even react stuff.
So i do changes in the App.jsx and save the file. Webpack compiles again, and update the outPut folders file, all good until here too.
now all new changes ahead the App.jsx will be compiled by the webpack normally without any single error on console... BUT the output folder is not updating anymore... and of course the browser does not show any changes onde the compiled files into output folder were not updated ... for some reason...

How to fix this? How setup the webpack to keeping update the new compiled changes into the output/public folder?

Im on MAC system, using a apache web-server, Here is some of my project files:

webpack/encore config:

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

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('main', './assets/main.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })
    //.enableSassLoader()
    //.enableTypeScriptLoader()
    .enableReactPreset()
;

module.exports = Encore.getWebpackConfig();

My /assets/main.js

// main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/app.css'


ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
)

My app.jsx

// app.jsx
import React, {useState} from 'react'
const App = () =>{

    const [count,setCount] = useState(0);
    return (
        <div>
            <div>Hello World! count: {count}</div>
            <button
                onClick={() => setCount(count +1)}
            >
                CLICK
            </button>s
        </div>
    )
}

export default App;

And My twig file:

<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {% block stylesheets %}
            {{ encore_entry_link_tags('main') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('main') }}
        {% endblock %}
    </head>
    <body>
        <div id="root"></div>
        {% block body %}{% endblock %}
    </body>
</html>

Solution

I found the issue. Was a file there is not named in the capital casa BUT imported as it was.

Im adding this here to help someone else.

after renaming the app.js to App.js everithing works well.

Good coding guys.