I can't solve the error: "Cannot find package '@babel/preset-flow' in PHP Symfony project"

Question

In a Symfony based PHP application I am trying to use Babel. I'm working on a computer with the Apple M1 chip.

I have Encore installed, following the instructions on the Symfony website.

When I run:

yarn watch 

I'm having this error:

ERROR  Failed to compile with 1 errors                                                               13:36:18

error  in ./assets/app.js                                                                            13:36:18

Module build failed (from ./node_modules/@symfony/webpack-encore/node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/preset-flow' imported from /Users/me/my_project/babel-virtual-resolve-base.js
    at new NodeError (/Users/me/my_project/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:203:5)
    at packageResolve (/Users/me/my_project/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:872:9)
    at moduleResolve (/Users/me/my_project/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:901:20)
    at defaultResolve (/Users/me/my_project/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:984:15)
    at resolve (/Users/me/my_project/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:998:12)
    at resolve (/Users/me/my_project/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:13:10)
    at tryImportMetaResolve (/Users/me/my_project/node_modules/@babel/core/lib/config/files/plugins.js:123:45)
    at resolveStandardizedNameForImport (/Users/me/my_project/node_modules/@babel/core/lib/config/files/plugins.js:145:19)
    at resolveStandardizedName (/Users/me/my_project/node_modules/@babel/core/lib/config/files/plugins.js:154:12)
    at loadPreset (/Users/me/my_project/node_modules/@babel/core/lib/config/files/plugins.js:56:20)

Reading answers to questions in similar situations, I have installed the following packages to try to solve the problem, but it still doesn't work:

• npm install babel-preset-flow
• npm install -D babel-loader @babel/core @babel/preset-env webpack
• npm install --save styled-jsx

In app.js I have this content:

const $ = require('jquery');
require('bootstrap');
import './styles/app.scss';
import './styles/footer.css';
import './styles/prosidebar.scss';    
import './bootstrap';

In package.json I have these dependencies:

"devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "@hotwired/stimulus": "^3.0.0",
    "@popperjs/core": "^2.11.7",
    "@symfony/stimulus-bridge": "^3.2.0",
    "@symfony/webpack-encore": "^4.3.0",
    "babel-loader": "^9.1.2",

    "bootstrap": "^5.2.3",
    "bootstrap-sass": "^3.4.3",
    "core-js": "^3.30.2",
    "jquery": "^3.7.0",
    "regenerator-runtime": "^0.13.9",
    "sass": "^1.62.1",
    "sass-loader": "^13.0.0",
    "webpack": "^5.84.1",
    "webpack-cli": "^4.10.0",
    "webpack-notifier": "^1.15.0"
},

And this is the content of webpack.config.js.

For the Babel configuration, I have followed the instructions on the Symfony website:

const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()

    //***For M1 Chip disable this line:***
    // .enableBuildNotifications()

    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel(function(babelConfig) {
         babelConfig.presets.push('@babel/preset-flow');
         babelConfig.plugins.push('styled-jsx/babel');
     }, {
         includeNodeModules: ['foundation-sites'],
     })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })

    .enableSassLoader()
;

module.exports = Encore.getWebpackConfig();