I am working on a full stack symfony (v7) project in which i’m using Webpack-encore bundle to bundle and compile different assets

the config in bootstrap.js says the following:

import { startStimulusApp } from '@symfony/stimulus-bridge';

const app = startStimulusApp(
    require.context(
        '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
        true,
        /.[jt]sx?$/
    )
);
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

i’ve created a ‘js/’ folder in which i want to include all js related stuffs (matter to have an organized js code base) but when i import stuffs from /js/log.js, for example, webpack watching process from terminal says:

 ERROR  Failed to compile with 1 errors                                                                                                                                                                         

Module build failed: Module not found:
"./assets/app.js" contains a reference to the file "js/log.js".

i tried to make a workaround with the regex in the bootstrap.js to track all js files in any XXX folder in /assets folder
but nothing works

i appreciate any help/suggestions

here the tree of the project so far:

.
├── assets
│   ├── app.js
│   ├── bootstrap.js
│   ├── controllers
│   │   └── hello_controller.js
│   ├── controllers.json
│   ├── js
│   │   └── log.js
│   └── styles
│       └── app.css
├── bin
│   ├── console
│   └── phpunit
├── composer.json
├── composer.lock
├── config
├── migrations
├── package.json
├── package-lock.json
├── phpstan.neon
├── phpunit.xml.dist
├── public
│   ├── build
│   └── index.php
├── README.md
├── src
├── symfony.lock
├── templates
├── tests
├── translations
└── webpack.config.js