ERROR in Entry module not found: Error: Can't resolve 'babel-loader'

Question

I am a beginner to react. While setting up the installation and loading up all the dependencies, I finally run the npm start command but this generates the error ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C:\Users\me\Documents\React\react-playlist' I have performed all the installation steps correctly. I have also attached the screenshot of the project folder. I also got webpack installed globally v 3.10.0 but that also didn't work. I also tried by inserting resolve loaders code in package.json file but that also didn't work. Here is the error picture.

P.S.: I'm following this tutorial

Below is the code of my project. Package.json file:

{
  "name": "react-playlist",
  "version": "1.0.0",
  "description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iamshaunjp/react-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

Webpack.config.js

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'env']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    } };

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React - Novice to Ninja!</title>
    </head>
    <body>
      <script src="/app/bundle.js"></script>
    </body>
</html>

Make sure to install all the packages first using `npm install` followed by npm start — cdoshi, Dec 21 '17 at 17:52
webpack is deprecating `module.loaders`. Try using `module.rules` instead: https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference — casraf, Dec 21 '17 at 18:18
@casraf It threw a huge error starting with "options/query provided without loader (use loader + options)". That not a right move I think, — Sanchit Gupta, Dec 21 '17 at 18:28

score 6 · Answer 1 · answered Dec 29 '17 at 00:01

It looks like module.loaders section of your webpack config is for older versions of webpack while you are using the latest (3.10.0). This is how it should look with the latest webpack for your configuration:

module: {
  rules: [
    { 
      test: /\.js$/,
      include: [
        path.resolve(__dirname, "src")
      ],
      use: {
        loader: 'babel-loader'
      },
      options: {
        presets: ['react', 'es2015', 'env']
      }
    },
    {
       test: /\.css$/,
       use: {
         loader: 'style-loader!css-loader'
       }     
    }
  ]

All webpack options are described in the docs in the configuration section here.

user8128167 · Answer 2 · 2021-08-04T15:08:27.553

5

Please see this post for details (ERROR in multi) Module not found: Error: Can't resolve 'babel/loader' and execute this command:

npm install -D babel-loader @babel/core @babel/preset-env webpack

Source: https://github.com/babel/babel-loader

edited Aug 04 '21 at 15:08

answered Oct 22 '20 at 23:39

user8128167

6,929
6
66
79

ERROR in Entry module not found: Error: Can't resolve 'babel-loader'

2 Answers2