Getting this error when using Babel and Webpack on React DnD project

Question

Here is the problem, when using plain ReactJS (no React DnD), Babel and Webpack compile my .js files flawlessly, but when trying to use React DnD in my project, this error occurred when compiling js using Webpack and Babel:

ERROR in ./~/disposables/modules/index.js
Module build failed: ReferenceError: [BABEL] D:\MyProject\React_002\node_modules\disposables\modules\index.js: Using removed Babel 5 option: D:\MyProject\React_002\node_modules\disposables\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
    at Logger.error (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20)
    at OptionManager.init (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (D:\MyProject\React_002\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (D:\MyProject\React_002\node_modules\babel-loader\lib\index.js:48:20)
    at Object.module.exports (D:\MyProject\React_002\node_modules\babel-loader\lib\index.js:163:20)
 @ ./~/react-dnd/lib/decorateHandler.js 41:19-41
 @ ./~/react-dnd/lib/DragSource.js
 @ ./~/react-dnd/lib/index.js
 @ ./src/js/Container.js
 @ ./src/js/script.js

this is my webpack.config.js file

var path = require('path');

module.exports = {
  entry: './src/js/script.js',
  output: {
    path: path.join(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/'
      }
    ]
  }
};

this is my .babelrc file

{
  "presets" : ["es2015", "react"]
}

and this is my package.json file

{
  "name": "React_002",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "babel": "babel",
    "webpack": "webpack",
    "build": "rimraf dist && webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.5.4",
    "react-dnd": "^2.3.0",
    "react-dnd-html5-backend": "^2.3.0",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "rimraf": "^2.6.1",
    "webpack": "^2.4.1"
  }
}

How to solve this? and what are the cause for this problem? Thanks

Answer 1

You're not actually excluding node_modules from the rule. You passed in a string that corresponds to the absolute path /node_modules/, that is the node_modules directory in /, the root of your file system. It should be a regular expressions and /regex/ is the the regular expression literal syntax, but if you add quotes around it, it becomes a string (similar to what would happen if you put quotes around an array literal). See also MDN - Regular Expressions.

Your rule should be:

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  exclude: /node_modules/
}