webpack react development mode - reactjs

Question

I am not able to configure Webpack with react in development mode.
Here is my package JSON :
...
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"gulp": "^4.0.0",
"gulp-sass": "^4.0.1",
"webpack": "^4.12.2",
"webpack-stream": "^4.0.3"
}
...
I am getting this error in the browser :
Uncaught Error: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 for the full message or use the non-minified dev environment
When I set web pack to mode development :
const DIR_PAGES = path.join(__dirname, 'pages');
const DIR_TARGET = path.join(__dirname, '..', 'assets');
const DIR_TARGET_PAGES = path.join(__dirname, '..', 'assets', 'pages');
module.exports = {
mode: "development",
/**
* DEFINE PAGES JS HERE
*/
entry: {
'test' : path.join(DIR_PAGES, 'test', 'test.js'),
},
resolve: {
extensions: ['.js', '.jsx']
},
/**
* HOW TO TRANSCODE JAVASCRIPT
*/
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
/**
* OUTPUT LOCATION
*/
output: {
path: DIR_TARGET_PAGES,
filename: '[name]/[name].js'
},
};
I am building using webpack-stream. here is my build task :
const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');
gulp.task('webpack', function() {
return webpack_stream(webpack_config)
.pipe(gulp.dest(DIR_TARGET_JS));
});
I am getting this error while building web pack using gulp :
[13:57:12] 'webpack' errored after 161 ms
[13:57:12] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'mode'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
mode: ...
}
})
]
...
I don't know what to do can you help me please
Thank you