CODEWITHSUNDEEP
javascriptjsonnode.jsreactjswebpack
Sanchit Gupta
Sanchit Gupta

Reputation: 87

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

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>

Upvotes: 6

Views: 11338

Answers (2)

user8128167
user8128167

Reputation: 7696

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

Upvotes: 5

margaretkru
margaretkru

Reputation: 2781

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.

Upvotes: 6

Related Questions