title: What's wrong with my webpack and babel loaders and or config files? MERN + Material Design -- custom webpack.config.js and babel.config.js
body: <p>I am relatively new to assembling babel and webpack config files.</p>
  <p>I recently followed <a href="https://www.mongodb.com/languages/mern-stack-tutorial" rel="nofollow noreferrer">this tutorial</a>, to setup a MERN stack app scaffold.</p>
  <p>In an effort to add material design in my 'client folder, I referred to <a href="https://material.io/develop/web/getting-started" rel="nofollow noreferrer">this tutorial</a>, which had me install SASS, Webpack, and Babel.</p>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>const path = require('path');
  
  module.exports = [{
      entry: './src/index.js',
      mode: 'development',
      output: {
          //This is necessary for webpack to compile
          //But we never use style-bundle.js
          filename: 'style-bundle.js',
      },
      module: {
          rules: [
              {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: &quot;babel-loader&quot;,
                    options: {
                        cacheDirectory: true,
                        cacheCompression: false,
                        envName: &quot;development&quot;
                        //isProduction ? &quot;production&quot; : 
                    }
                }
              },
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: 'bundle.css',
                          },
                      },
                      { loader: 'extract-loader' },
                      { loader: 'css-loader' },
                      {
                        loader: 'sass-loader',
                        options: {
                            //Prefer Dart Sass
                            implementation: require('sass'),
                            options: {
                                //Prefer Dart Sass
                                implementation: require('sass'),
  
                                // See https://github.com/webpack-contrib/sass-loader/issues/804
                                webpackImporter: false,
                            }
                        }
  
                      }
                  ]
              }
          ]
      }
  }]
  </code></pre>
  <p><strong>babel.config.js</strong></p>
  <pre><code>module.exports = {
      presets: [
        [
          &quot;@babel/preset-env&quot;,
          {
              modules: false
          }
      ],
      &quot;@babel/preset-react&quot;
    ],
    plugins: [
        &quot;@babel/plugin-transform-runtime&quot;,
        &quot;@babel/plugin-syntax-dynamic-import&quot;,
        &quot;@babel/plugin-proposal-call-properties&quot;
    ],
    env: {
        productions: {
            only: [&quot;src&quot;],
            plugins: [
              [
                  &quot;transform-react-remove-prop-types&quot;,
                  {
                      removeImport: true
                  }
              ],
              &quot;@babel/plugin-transform-react-inline-elements&quot;,
              &quot;@babel/plugin-transform-react-constant-elements&quot;
            ]
        }
    }
  };
  </code></pre>
  <p><strong>ERROR</strong></p>
  <pre><code>ERROR in ./src/index.js 10:2
  Module parse failed: Unexpected token (10:2)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |
  | ReactDOM.render(
  &gt;   &lt;React.StrictMode&gt;
  |     &lt;BrowserRouter&gt;
  |
  webpack 5.64.4 compiled with 1 error in 900ms
  </code></pre>
  <p>my <strong>index.js</strong> file is as follows...</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.scss';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import { BrowserRouter } from &quot;react-router-dom&quot;;
  import 'bootstrap/dist/css/bootstrap.css';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;BrowserRouter&gt;
    &lt;React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  </code></pre>
  <p>Oh, also I changed &quot;start&quot;: &quot;react-scripts&quot; to &quot;start&quot;: &quot;webpack serve&quot; in package.json.</p>
  <p>Any suggestions, solutions, or guidance would be much appreciated.</p>
  <p>I think I might have too many things trying to start the app. What I want is material design bootstrap react and axios in my front end.</p>
  <p>I can provide more information if necessary .</p>
  <p>Thanks,
  Brandon</p>