Ошибка разбора модуля: вам может понадобиться соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла

Question

Я работаю над проектом, использующим React. Я новичок в React и не имею особого опыта настройки файла конфигурации веб-пакета в symfony. Я получаю эту ошибку в браузере:

             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`),
                   }),
                  ],
                 };

что я делаю не так?

Answer 1

Убедитесь, что у вас установлена ​​предустановка Babel es2015.

npm install babel-preset-es2015

В файле webpack.config настройте загрузчик babel:

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