Webpack Encore and import React

Question

I am trying a React project with Symfony and Webpack Encore.

I have added the following packages :

yarn add @babel/preset-react --dev
yarn add --dev react react-dom

For this, I had to add import React from 'react' on every .jsx files and it worked. However, I was wondering if there is not a smarter way to do so instead of repeating the import every time

I found and tried different approaches, and installed yarn add --dev @babel/core @babel/preset-env babel-loader too but without any luck. Apparently, the fact that Encore is used seems to complexify things more than simplifying

Any suggestions will be appreciated.

Thanks

Answer 1

I found a solution for Webpack Encore after reading this article and this one and this one

In webpack.config.js I added this

var webpack = require('webpack');

Encore
    // ...
    .addPlugin(new webpack.ProvidePlugin({
            React: "react" // automatically import react where needed
    }))

It works just fine but still not sur it is the smartest solution