title: Parsing error: Cannot find module '@babel/preset-react'
body: <p>I have a React project. In the first line in every .js file where I import React, I am getting this error: <code>Parsing error: Cannot find module '@babel/preset-react'</code>.</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
      &quot;name&quot;: &quot;admin&quot;,
      &quot;version&quot;: &quot;2.0.0&quot;,
      &quot;description&quot;: &quot;&quot;,
      &quot;author&quot;: &quot;&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;engines&quot;: {
          &quot;node&quot;: &quot;&gt;=14.15 &lt;15&quot;,
          &quot;npm&quot;: &quot;~6&quot;
      },
      &quot;scripts&quot;: {
          &quot;build-config:local&quot;: &quot;CONFIG_ENV=local npm run build-config&quot;,
          &quot;build-config:dev&quot;: &quot;CONFIG_ENV=dev npm run build-config&quot;,
          &quot;build-config:staging&quot;: &quot;CONFIG_ENV=staging npm run build-config&quot;,
          &quot;build-config:prod&quot;: &quot;CONFIG_ENV=prod npm run build-config&quot;,
          &quot;build-config&quot;: &quot;buildconfig --env $CONFIG_ENV&quot;,
          &quot;build&quot;: &quot;npm run build-config &amp;&amp; webpack --config ./webpack.config.js --mode production&quot;,
          &quot;start&quot;: &quot;webpack-dev-server --config ./webpack.config.dev.js --mode development&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@babel/eslint-parser&quot;: &quot;^7.15.7&quot;,
          &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.36&quot;,
          &quot;@fortawesome/free-brands-svg-icons&quot;: &quot;^5.15.4&quot;,
          &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.4&quot;,
          &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.15&quot;,
          &quot;axios&quot;: &quot;^0.21.4&quot;,
          &quot;axios-progress-bar&quot;: &quot;^1.2.0&quot;,
          &quot;classnames&quot;: &quot;^2.3.1&quot;,
          &quot;clean-webpack-plugin&quot;: &quot;^4.0.0&quot;,
          &quot;copy-text-to-clipboard&quot;: &quot;^3.0.1&quot;,
          &quot;copy-webpack-plugin&quot;: &quot;^9.0.1&quot;,
          &quot;css-loader&quot;: &quot;^6.3.0&quot;,
          &quot;date-fns&quot;: &quot;1.30.1&quot;,
          &quot;file-loader&quot;: &quot;^6.2.0&quot;,
          &quot;html-webpack-plugin&quot;: &quot;^5.3.2&quot;,
          &quot;humanize-string&quot;: &quot;^2.1.0&quot;,
          &quot;lodash&quot;: &quot;^4.17.21&quot;,
          &quot;loglevel&quot;: &quot;^1.7.1&quot;,
          &quot;rc-checkbox&quot;: &quot;^2.1.7&quot;,
          &quot;rc-collapse&quot;: &quot;^3.1.2&quot;,
          &quot;rc-switch&quot;: &quot;^3.2.2&quot;,
          &quot;react&quot;: &quot;^16.3.0&quot;,
          &quot;react-bootstrap-table-next&quot;: &quot;^4.0.3&quot;,
          &quot;react-bootstrap-table2-editor&quot;: &quot;^1.4.0&quot;,
          &quot;react-bootstrap-table2-filter&quot;: &quot;^1.3.3&quot;,
          &quot;react-bootstrap-table2-paginator&quot;: &quot;^2.1.2&quot;,
          &quot;react-dom&quot;: &quot;^16.9.0&quot;,
          &quot;react-helmet&quot;: &quot;^6.1.0&quot;,
          &quot;react-json-tree&quot;: &quot;^0.15.0&quot;,
          &quot;react-router-dom&quot;: &quot;^5.3.0&quot;,
          &quot;react-syntax-highlighter&quot;: &quot;^15.4.4&quot;,
          &quot;sass&quot;: &quot;^1.42.1&quot;,
          &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
          &quot;serialize-error&quot;: &quot;^8.1.0&quot;,
          &quot;single-config&quot;: &quot;^2.0.1&quot;,
          &quot;style-loader&quot;: &quot;^3.3.0&quot;,
          &quot;svg-react-loader&quot;: &quot;^0.4.6&quot;,
          &quot;webpack&quot;: &quot;^5.53.0&quot;,
          &quot;webpack-cli&quot;: &quot;^4.8.0&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@babel/core&quot;: &quot;^7.15.5&quot;,
          &quot;@babel/preset-env&quot;: &quot;^7.15.6&quot;,
          &quot;@babel/preset-react&quot;: &quot;^7.14.5&quot;,
          &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
          &quot;eslint&quot;: &quot;^7.32.0&quot;,
          &quot;eslint-config-prettier&quot;: &quot;^7.1.0&quot;,
          &quot;eslint-plugin-import&quot;: &quot;^2.22.1&quot;,
          &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.3&quot;,
          &quot;eslint-plugin-prettier&quot;: &quot;^3.3.1&quot;,
          &quot;eslint-plugin-react&quot;: &quot;^7.19.0&quot;,
          &quot;prettier&quot;: &quot;^2.2.1&quot;,
          &quot;stylelint&quot;: &quot;^13.13.0&quot;,
          &quot;stylelint-config-prettier&quot;: &quot;^8.0.2&quot;,
          &quot;stylelint-config-recommended&quot;: &quot;^5.0.0&quot;,
          &quot;stylelint-order&quot;: &quot;^4.1.0&quot;,
          &quot;stylelint-prettier&quot;: &quot;1.2.0&quot;,
          &quot;stylelint-scss&quot;: &quot;3.19.0&quot;,
          &quot;webpack-dev-server&quot;: &quot;^4.2.1&quot;
      }
  }
  </code></pre>
  <p><strong>.eslintrc.json</strong></p>
  <pre><code>{
      &quot;parser&quot;: &quot;@babel/eslint-parser&quot;,
      &quot;extends&quot;: [&quot;eslint:recommended&quot;, &quot;plugin:react/recommended&quot;, &quot;prettier&quot;, &quot;prettier/react&quot;],
      &quot;plugins&quot;: [&quot;react&quot;, &quot;import&quot;, &quot;jsx-a11y&quot;, &quot;prettier&quot;],
      &quot;env&quot;: {
          &quot;es6&quot;: true,
          &quot;browser&quot;: true,
          &quot;node&quot;: true
      },
      &quot;parserOptions&quot;: {
          &quot;ecmaFeatures&quot;: {
              &quot;jsx&quot;: true
          },
          &quot;sourceType&quot;: &quot;module&quot;,
          &quot;ecmaVersion&quot;: 6,
          &quot;requireConfigFile&quot;: false,
          &quot;babelOptions&quot;: {
              &quot;presets&quot;: [&quot;@babel/react&quot;]
          }
      },
      &quot;settings&quot;: {
          &quot;react&quot;: {
              &quot;version&quot;: &quot;detect&quot;
          }
      },
      &quot;rules&quot;: {
          &quot;prettier/prettier&quot;: &quot;error&quot;,
          &quot;consistent-return&quot;: &quot;warn&quot;,
          &quot;no-console&quot;: &quot;warn&quot;,
          &quot;eqeqeq&quot;: &quot;error&quot;,
          &quot;no-alert&quot;: &quot;error&quot;,
          &quot;no-caller&quot;: &quot;error&quot;,
          &quot;no-constructor-return&quot;: &quot;error&quot;,
          &quot;no-else-return&quot;: &quot;error&quot;,
          &quot;no-eq-null&quot;: &quot;error&quot;,
          &quot;no-eval&quot;: &quot;error&quot;,
          &quot;no-extend-native&quot;: &quot;error&quot;,
          &quot;no-extra-bind&quot;: &quot;error&quot;,
          &quot;no-extra-label&quot;: &quot;error&quot;,
          &quot;no-floating-decimal&quot;: &quot;error&quot;,
          &quot;no-implicit-globals&quot;: &quot;error&quot;,
          &quot;no-implied-eval&quot;: &quot;error&quot;,
          &quot;no-iterator&quot;: &quot;error&quot;,
          &quot;no-lone-blocks&quot;: &quot;error&quot;,
          &quot;no-loop-func&quot;: &quot;error&quot;,
          &quot;no-multi-spaces&quot;: &quot;error&quot;,
          &quot;no-multi-str&quot;: &quot;error&quot;,
          &quot;no-new-func&quot;: &quot;error&quot;,
          &quot;no-new-wrappers&quot;: &quot;error&quot;,
          &quot;no-octal-escape&quot;: &quot;error&quot;,
          &quot;no-proto&quot;: &quot;error&quot;,
          &quot;no-return-assign&quot;: &quot;error&quot;,
          &quot;no-return-await&quot;: &quot;error&quot;,
          &quot;no-script-url&quot;: &quot;error&quot;,
          &quot;no-self-compare&quot;: &quot;error&quot;,
          &quot;no-sequences&quot;: &quot;error&quot;,
          &quot;no-throw-literal&quot;: &quot;error&quot;,
          &quot;no-unmodified-loop-condition&quot;: &quot;error&quot;,
          &quot;no-unused-expressions&quot;: &quot;error&quot;,
          &quot;no-useless-call&quot;: &quot;error&quot;,
          &quot;no-useless-concat&quot;: &quot;error&quot;,
          &quot;no-useless-return&quot;: &quot;error&quot;,
          &quot;require-await&quot;: &quot;error&quot;,
          &quot;arrow-body-style&quot;: [&quot;error&quot;, &quot;as-needed&quot;],
          &quot;arrow-spacing&quot;: [&quot;error&quot;, { &quot;before&quot;: true, &quot;after&quot;: true }],
          &quot;no-duplicate-imports&quot;: &quot;error&quot;,
          &quot;no-useless-constructor&quot;: &quot;error&quot;,
          &quot;no-useless-rename&quot;: &quot;error&quot;,
          &quot;no-var&quot;: &quot;error&quot;,
          &quot;no-useless-computed-key&quot;: &quot;error&quot;,
          &quot;prefer-arrow-callback&quot;: &quot;error&quot;,
          &quot;prefer-const&quot;: &quot;error&quot;,
          &quot;prefer-spread&quot;: &quot;error&quot;,
          &quot;prefer-template&quot;: &quot;error&quot;,
          &quot;rest-spread-spacing&quot;: &quot;error&quot;,
          &quot;symbol-description&quot;: &quot;error&quot;,
          &quot;comma-spacing&quot;: [&quot;error&quot;, { &quot;before&quot;: false, &quot;after&quot;: true }],
          &quot;key-spacing&quot;: &quot;error&quot;,
          &quot;keyword-spacing&quot;: &quot;error&quot;,
          &quot;max-len&quot;: [&quot;error&quot;, { &quot;code&quot;: 160 }],
          &quot;linebreak-style&quot;: &quot;error&quot;,
          &quot;lines-between-class-members&quot;: &quot;error&quot;,
          &quot;new-cap&quot;: &quot;error&quot;,
          &quot;no-multi-assign&quot;: &quot;error&quot;,
          &quot;no-negated-condition&quot;: &quot;warn&quot;,
          &quot;no-nested-ternary&quot;: &quot;error&quot;,
          &quot;no-new-object&quot;: &quot;error&quot;,
          &quot;no-trailing-spaces&quot;: &quot;error&quot;,
          &quot;prefer-object-spread&quot;: &quot;error&quot;,
  
          &quot;react/prop-types&quot;: &quot;off&quot;,
          &quot;react/jsx-filename-extension&quot;: [1, { &quot;extensions&quot;: [&quot;.js&quot;, &quot;.jsx&quot;, &quot;.tsx&quot;] }],
  
          &quot;react/sort-comp&quot;: [
              &quot;error&quot;,
              {
                  &quot;order&quot;: [&quot;static-variables&quot;, &quot;static-methods&quot;, &quot;lifecycle&quot;, &quot;everything-else&quot;, &quot;/^is.+$/&quot;, &quot;/^on.+$/&quot;, &quot;/^render.+$/&quot;, &quot;render&quot;],
                  &quot;groups&quot;: {
                      &quot;lifecycle&quot;: [
                          &quot;displayName&quot;,
                          &quot;propTypes&quot;,
                          &quot;contextTypes&quot;,
                          &quot;childContextTypes&quot;,
                          &quot;mixins&quot;,
                          &quot;statics&quot;,
                          &quot;defaultProps&quot;,
                          &quot;state&quot;,
                          &quot;instance-variables&quot;,
                          &quot;constructor&quot;,
                          &quot;getDefaultProps&quot;,
                          &quot;getInitialState&quot;,
                          &quot;getChildContext&quot;,
                          &quot;getDerivedStateFromProps&quot;,
                          &quot;componentWillMount&quot;,
                          &quot;UNSAFE_componentWillMount&quot;,
                          &quot;componentDidMount&quot;,
                          &quot;componentWillReceiveProps&quot;,
                          &quot;UNSAFE_componentWillReceiveProps&quot;,
                          &quot;shouldComponentUpdate&quot;,
                          &quot;componentWillUpdate&quot;,
                          &quot;UNSAFE_componentWillUpdate&quot;,
                          &quot;getSnapshotBeforeUpdate&quot;,
                          &quot;componentDidUpdate&quot;,
                          &quot;componentDidCatch&quot;,
                          &quot;componentWillUnmount&quot;
                      ]
                  }
              }
          ],
  
          &quot;import/no-unresolved&quot;: &quot;off&quot;,
          &quot;import/order&quot;: [
              &quot;error&quot;,
              {
                  &quot;pathGroups&quot;: [
                      {
                          &quot;pattern&quot;: &quot;*.scss&quot;,
                          &quot;group&quot;: &quot;object&quot;,
                          &quot;patternOptions&quot;: { &quot;matchBase&quot;: true },
                          &quot;position&quot;: &quot;after&quot;
                      },
                      {
                          &quot;pattern&quot;: &quot;*.svg&quot;,
                          &quot;group&quot;: &quot;object&quot;,
                          &quot;patternOptions&quot;: { &quot;matchBase&quot;: true },
                          &quot;position&quot;: &quot;after&quot;
                      }
                  ]
              }
          ]
      }
  }
  </code></pre>
  <p><strong>.babelrc</strong></p>
  <pre><code>{
      &quot;presets&quot;: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;]
  }
  </code></pre>
  <p><strong>webpack.config.dev.js</strong></p>
  <pre><code>const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebPackPlugin = require('html-webpack-plugin');
  
  module.exports = () =&gt; ({
      devServer: {
          port: 8084,
          historyApiFallback: true, // serves index.html for all routes to avoid 404
          hot: true
      },
      devtool: 'eval-source-map',
      stats: 'minimal',
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: '[name].[fullhash].bundle.js',
          publicPath: '/'
      },
      resolve: {
          extensions: ['.js', '.jsx', '.json']
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: [path.resolve(__dirname, 'node_modules')],
                  include: [path.resolve(__dirname, 'src')],
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env', '@babel/preset-react']
                      }
                  }
              },
              {
                  test: /\.(scss|css)$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      {
                          loader: 'sass-loader',
                          options: {
                              sassOptions: {
                                  quietDeps: true
                              }
                          }
                      }
                  ]
              },
              {
                  test: /\.(jpe?g|png|gif|svg)$/,
                  include: [path.resolve(__dirname, 'src')],
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]',
                      outputPath: 'images/',
                      useRelativePath: false
                  }
              }
          ]
      },
      plugins: [
          new CleanWebpackPlugin(),
          new HtmlWebPackPlugin({
              template: './src/index.html',
              favicon: './src/assets/favicon/favicon-32x32.png'
          })
      ]
  });
  </code></pre>