Obtenir cette erreur lors de l'utilisation Babel et Webpack sur React projet DnD

Question

est le problème ici, lors de l'utilisation ReactJS plaine (pas React DND), Babel et Webpack compilent mes .js parfaitement, mais en essayant d'utiliser React DnD dans mon projet, cette erreur est survenue lors compilation js en utilisant Webpack et 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 

c'est mon webpack.config.js fichier

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/' 
     } 
    ] 
    } 
}; 

ceci est mon .babelrc fichier

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

et voici mon package.json fichier

{ 
    "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" 
    } 
} 

Comment résoudre ce problème? et quelles sont la cause pour ce problème? Merci

Answer 1

Vous n'excluez pas node_modules de la règle. Vous avez transmis une chaîne qui correspond au chemin absolu /node_modules/, c'est-à-dire le répertoire node_modules dans /, la racine de votre système de fichiers. Ce devrait être une expression régulière et /regex/ est la syntaxe littérale de l'expression régulière, mais si vous ajoutez des guillemets autour de celle-ci, elle devient une chaîne (semblable à ce qui se passerait si vous placez des guillemets autour d'un tableau littéral). Voir aussi MDN - Regular Expressions.

Votre règle devrait être:

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