Module parse failed: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Question

I am doing a project at work that uses React I am new to React and have no particular experience setting up the webpack configuration file in symfony. I'm getting this error in the browser:

             class App extends React.Component {
             >     _canvas = null
             |     _dimension = null
             |     _margin = 30

// webpack

                module.exports = {
                  mode: 'development',
                  devtool: 'inline-sourcemap',
                  resolve: {
                    alias: {
                      BezierPlugin:'gsap/src/uncompressed/
                                    plugins/BezierPlugin',
                      ScrollToPlugin: 'gsap/src/uncompressed/
                                       plugins/ScrollToPlugin',
                      swiper: 'swiper/dist/js/swiper.min',
                    },
                  },
                  entry: {
                    app: ['./js/app.js'],
                  },
                  output: {
                    path: path.resolve(__dirname, `${assetsPath}/js- 
                    build`),
                    filename: '[name].bundle.js',
                  },
                  module: {
                    rules: [{
                        test: /\.html$/,
                        loader: 'html-loader',
                        options: {
                          attrs: false,
                        },
                    },
                    {
                        test: /\.jsx?$/, // Match both .js and .jsx files
                        exclude: /node_modules/,
                        loader: "babel-loader",
                        query: {
                          presets: ['es2015', 'react']
                        }
                     },
                   ],
                 },
                 plugins: [
                   new webpack.ProvidePlugin({
                     $: 'jquery',
                     jQuery: 'jquery',
                     'window.jQuery': 'jquery',
                   }),
                   new webpack.DllReferencePlugin({
                     context: __dirname,
                     manifest: path.resolve(__dirname, `${assetsPath}/js- 
                     build/manifest.bundle.json`),
                   }),
                  ],
                 };

what am I doing wrong?

Answer 1

Make sure you have the es2015 babel preset installed.

npm install babel-preset-es2015

In webpack.config configure babel-loader:

  { 
     test: /\.jsx?$/,         // Match both .js and .jsx files
     exclude: /node_modules/, 
     loader: "babel-loader", 
     query: {
       presets:['es2015', 'react']
     }
  },