Error: Cannot find module 'babel-preset-react' - If you want to resolve "react", use "module:react"

Question

I have gone through all the SO questions regarding this issue and so far I haven't been able to fix this problem.

I am following a Pluralsight course on React and the example application is built manually from scratch; that means that each dependency is added manually without the use of any CLI. Since the course is somewhat old I had to spend quite some time upgrading most of babel's packages until I got to this problem when running webpack.

This is the list of dependencies on the package.json

     "babel": {
       "presets": [
         "react",
         "env",
         "stage-2"
       ]
      },
      "dependencies": {
        "@babel/cli": "^7.14.3",
        "@babel/core": "^7.14.3",
        "@babel/preset-env": "^7.14.4",
        "@babel/preset-react": "^7.13.13",
        "@babel/preset-stage-2": "^7.8.3",
        "babel-loader": "^8.2.2",
        "ejs": "^3.1.6",
        "express": "^4.17.1",
        "nodemon": "^2.0.7",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "webpack": "^5.38.1"
      },
      "devDependencies": {
        "babel-eslint": "^10.1.0",
        "eslint": "^7.27.0",
        "eslint-plugin-react": "^7.24.0",
        "webpack-cli": "^4.7.0"
      }

And this is the webpack.config.js

const path = require('path');

module.exports = {
    entry: './lib/components/app.jsx',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            { 
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: 'defaults' }],
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ],
    },
    devtool: 'source-map',
};

I am running the command "webpack -w".

Most answers in SO talk about correctly configuring the "presets" in the webpack.config.js file. So far I have tried several things with the exact same result:

presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react'
]


presets: [
    '@babel/preset-react'
]                       

presets: [
    '@babel/preset-env', 
    '@babel/preset-react'
]

The full error I am getting is as follows:

ERROR in ./lib/components/app.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'

• If you want to resolve "react", use "module:react"
• Did you mean "@babel/react"? at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at resolve (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:164:23) at resolveStandardizedName (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\files\plugins.js:111:7) at resolvePreset (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\files\plugins.js:59:10) at loadPreset (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\files\plugins.js:78:20) at loadPreset.next () at createDescriptor (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\config-descriptors.js:187:16) at createDescriptor.next () at step (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules\gensync\index.js:261:32) at evaluateAsync (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules\gensync\index.js:291:5)

And for the sake of completeness, the app.jsx file the error is referring to is this one:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return (
        <h2>I am working!</h2>
    );
};

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Any help would be appreciated.

Answer 1

The babel key in your package.json is for Babel 6.x and references plugins that you do not have installed, which is why you are getting that error.

@babel/preset-env and @babel/preset-react will accomplish likely everything you need to worry about, so as long as those are installed and referenced in the Webpack config, you're good to go.