Can't resolve 'babel-loader'

Question

I am trying to configure my first node react app.

I keep getting an error that says "Can't resolve babel-loader".

Googling that error, I found a couple of suggestions which do not work.

The first is to add the following to my webpack.config.js

// resolveLoader: {   //       modulesDirectories: '/usr/local/lib/node_modules'   //   }, 

Trying that produces an error that says:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.  - configuration.resolveLoader has an unknown property 'modulesDirectories'. These properties are valid:    object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } 

The next suggestion is to try:

resolveLoader: {         fallback: '/usr/local/lib/node_modules'     }, 

That produces a similar error.

Does anyone have any advice on how to get started with this configuration. Understanding the documentation is proving difficult - every second word is jargon and I can't find a reference point to find fundamental understanding of what needs to be done to get started in this setup.

Webpack.config.js is:

module.exports = {   entry: './app/app.jsx',   output: {     path: __dirname,     filename: './public/bundle.js'   },    resolve: {     modules: [__dirname, 'node_modules'],     alias: {       Greeter: 'app/components/Greeter.jsx',       GreeterMessage: 'app/components/GreeterMessage.jsx',       GreeterForm: 'app/components/GreeterForm.jsx',      },     extensions: ['.js', '.jsx']   },    // resolveLoader: {   //       fallback: '/usr/local/lib/node_modules'   //   },    module :{     rules:[{       // use : 'babel-loader',       loader: 'babel-loader',       query :{         presets:['react','es2015']         // ,'es2017'       },       test: /\.jsx?$/,       exclude: /(node_modules|bower_components)/     }    ]  }   }; 

Answer 1

I had the same problem; I fixed it by installing the babel-loader module:

yarn add -D babel-loader

or

npm install --save babel-loader