gulp-webpack error: Entry module not found: Error: cannot resolve module 'babel'

Question

I keep getting this issue when trying to use gulp-webpack to transpile jsx / js to browser level.

I have updated both NPM and nodeJS to the current latest versions (3.8.9 and 6.1.0)

The error it outputs is:

ERROR in Entry module not found: Error: Cannot resolve module 'babel' in C:\xampp\htdocs\project\tools

The weird thing is that it is looking in the correct folder (the node_modules folder is in this directory) but it doesn't find it at all.

---

My folder structure is devided into 3 folders namely

• App
• src
• tools

The app folder contains the browser level code (js / css)

The src folder contains higher level languages (scss / jsx)

The tools folder contains my gulpfile, node_modules, package.json, bower.json and bower_components

---

My gulp task for transpiling jsx / js to browser level

gulp.task('react', function() {
return gulp.src('../src/js/react/index.js')
.pipe(webpack({
  entry: 
    {
      app: './../src/js/react/index.js'
    },
  output: {
    path: __dirname + "../app/js/react",
    publicPath: '/',
    filename: 'bundle.js'
  },

  module: {
    loaders: [{
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      cacheDirectory: true,
      query: {
        presets: [
          'babel-preset-es2015',
          'babel-preset-react'
        ].map(require.resolve)
      }
    }]
  },

  resolveLoader: {
        modulesDirectories: [
            '../../../tools/node_modules'
        ]
  },

  resolve: {
    root: __dirname,
    modulesDirectories: ['node_modules', 'bower_components'],
    extensions: ["", ".jsx", ".js"]
  }
}))
.pipe(gulp.dest('../app/js/react'));
});

---

My package.json file

{
  "name": "setup-nvdv",
  "version": "2.0.0",
  "description": "All around coding setup",
  "main": "index.php",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Neal van der Valk",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "babel-runtime": "^6.6.1",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-cached": "^1.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-cssnano": "^2.1.2",
    "gulp-imagemin": "^3.0.0",
    "gulp-jshint": "^2.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-purifycss": "^0.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.3.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-ttf2woff": "^1.1.0",
    "gulp-uglify": "^1.5.3",
    "gulp-watch": "^4.3.5",
    "gulp-webpack": "^1.5.0",
    "imagemin-mozjpeg": "^6.0.0",
    "jquery": "^2.2.3",
    "jshint": "^2.9.2",
    "lodash": "^4.12.0",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "webpack": "^1.13.0"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0"
  }
}

Answer 1

This took me a total of 3 days but here we are and this works!

I separated the config file of webpack which is presented below. The thing that is vital is having the resolve and resolveLoader before rest!

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        // "babel-polyfill",
        [__dirname, '.', '..', 'src', 'js', 'react', 'index.js'].join(path.sep)
    ],

    resolve: {
        modulesDirectories: ["../tools/node_modules", "../tools/node_modules/babel"]
    },

    resolveLoader: {
        root: path.resolve(__dirname, 'node_modules')
    },

    output: {
        path: [__dirname, '.', '..', 'app', 'js', 'react'].join(path.sep),
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                include: path.resolve(__dirname, '../src/js'),
                exclude: /(node_modules)/,
                test: /\.jsx?$/,
                loader: 'babel',
                query: {
                    presets: [
                        'babel-preset-stage-1',
                        'babel-preset-es2015',
                        'babel-preset-react'
                    ].map(require.resolve)
                }
            }
        ]
    }
};