title: Module parse failed: Unexpected token but all loaders are installed
body: <p>I am having trouble getting my MERN boilerplate set up. I'm still learning so the answer may be obvious but I can't find an answer for the current version of webpack, react, babel. I am getting this error when I <code>npm run dev</code>:</p>
  <pre><code>Module parse failed: Unexpected token (8: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;App /&gt;
  |   &lt;/React.StrictMode&gt;,
  
  webpack 5.4.0 compiled with 1 error in 231 ms
  </code></pre>
  <p>Which I have figured out means that the loader is not configured; however, I have this :</p>
  <p><strong>index.js</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import '../css/index.css';
  import App from '../components/App';
  
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
      entry: {
          home: './client/index.js',
          // add pages here with link to the js file for each
      },
  
      output: {
          path: path.resolve(__dirname, 'client'),
          filename: 'bundle.js'
      },
  
      module: {
          rules: [{
              test: /\\.jsx?$/,
              exclude: /node_modules/,
              use: [{
                  loader: 'babel-loader',
  
                  options: {
                      presets: [
                          '@babel/preset-env',
                          '@babel/preset-react'
                      ]
                  }
              }]
          },
          {
              test: /\\.css$/,
              use: [
                  'style-loader',
                  'css-loader'
              ]
          }]
      }
  }
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;mern-boilerplate&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.5&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.1&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.2.0&quot;,
      &quot;express&quot;: &quot;^4.17.1&quot;,
      &quot;mongoose&quot;: &quot;^5.10.13&quot;,
      &quot;nodemon&quot;: &quot;^2.0.6&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.0&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;webpack&quot;: &quot;webpack&quot;,
      &quot;dev&quot;: &quot;npm run webpack &amp;&amp; nodemon --exec babel-node --bin/www&quot;,
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/core&quot;: &quot;^7.12.3&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.5&quot;,
      &quot;axios&quot;: &quot;^0.21.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;body-parser&quot;: &quot;^1.19.0&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;webpack&quot;: &quot;^5.4.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.2.0&quot;
    }
  }
  </code></pre>
  <p>So, as far as I can tell I have the appropriate @babel/preset-react installed, and the correct webpack dependencies and loaders but webpack hangs with the error at &lt;React.StrictMode&gt;</p>
  <p>I am struggling here and would appreciate any help you guys can give me.</p>
  <p>Thanks in advance.</p>
  <p>Chris</p>