error with symfony - encore - webpack

[gabrielnn77]

I'm using a Symfony 6.4 project with the webpack/encore tools to use PHP on the server side, and Solid on the client side.
When yarn tries to compile, I get the following error:
ERROR Failed to compile with 1 errors

Error loading ./node_modules/solid-icons/lib/index.jsx

FIX To process React JS files:
1. Add Encore.enableReactPreset() to your webpack.config.js file.
2. Install @babel/preset-react to use enableReactPreset()
yarn add @babel/preset-react@^7.9.0 --dev

I was able to solve it by deleting the file ./node_modules/solid-icons/lib/index.jsx, and copying the file ./node_modules/solid-icons/lib/index.js in its place

I'm not using React in this project, I don't understand what's causing this error, and I'm not using TypeScript either.
Sorry for my bad English

[vincentfretin]

The error says React, but really it's how to transform the jsx syntax, you want to convert using babel-preset-solid, not @babel/preset-react.
You need a rule in your webpack config to convert the jsx of the solid-icons dependency using babel-preset-solid.
I have this in my webpack project:

{
  // ...
  module: {
    rules: [
      // ...
      {
        test: /solid-icons.*\.(ts|js)x?$/,
        use: {
          loader: "babel-loader",
          options: {
            compact: false,
            presets: ["solid"],
          },
        },
      },
    ],
  },
};

Hope this helps.

[gabrielnn77]

tanks!!

i write in webpack.config.js

Encore.addRule({
test: /solid-icons.*.(ts|js)x?$/,
use: {
loader: "babel-loader",
options: {
compact: false,
presets: ["solid"],
},
},
})
// .....
;

and this is OK