Webpack, babel and React Error message - reactjs

Question

Out of nowhere I started getting this error message,
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema.
- configuration has an unknown property 'devserver'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?,
devServer?, devtool?, entry, externals?, loader?, module?, name?,
node?, output?, 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: {
devserver: ...
}
})
]
I have been scouring the internet for the past 2 hours trying to find a solution but I am going round in circles!
Here is my .babelrc, webpack.config.js, .js and package.json files.
Any help would be amazing. Thanks
.babelrc
{
"presets":[
"react",
["es2015", {"modules": false, "loose": true}]
]
}
package.json
{
"name": "complete-intro-to-react",
"version": "1.0.0",
"description": "A two day workshop on a complete intro to React",
"main": "index.js",
"author": "Brian Holt <btholt#gmail.com>",
"license": "MIT",
"scripts": {
"test": "NODE_ENV=test jest",
"update-test": "npm run test -- -u",
"build": "webpack",
"dev": "webpack-dev-server",
"lint": "eslint js/**/*.js webpack.config.js",
"watch": "webpack --watch"
},
"dependencies": {
"axios": "0.15.2",
"express": "4.14.0",
"history": "^4.4.0",
"lodash": "4.16.2",
"preact": "^6.4.0",
"preact-compat": "^3.9.3",
"react": "15.3.2",
"react-dom": "15.3.2",
"react-redux": "4.4.0",
"react-router": "4.0.0-alpha.5",
"redux": "3.3.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-jest": "16.0.0",
"babel-loader": "^6.2.7",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "6.16.0",
"babel-preset-react": "^6.16.0",
"babel-register": "6.16.0",
"css-loader": "0.25.0",
"enzyme": "2.0.0",
"enzyme-to-json": "^1.3.0",
"eslint": "3.6.1",
"eslint-config-standard": "6.1.0",
"eslint-config-standard-jsx": "3.1.0",
"eslint-config-standard-react": "4.1.0",
"eslint-loader": "1.3.0",
"eslint-plugin-promise": "2.0.1",
"eslint-plugin-react": "6.3.0",
"eslint-plugin-standard": "2.0.0",
"jest": "15.1.1",
"jsdom": "9.5.0",
"json-loader": "0.5.4",
"react-addons-test-utils": "15.3.2",
"react-test-renderer": "15.3.2",
"style-loader": "0.13.1",
"webpack": "^2.1.0-beta.22",
"webpack-dev-server": "1.16.2"
},
"directories": {
"test": "test"
},
"repository": {
"type": "git",
"url": "git+https://github.com/btholt/complete-intro-to-react.git"
},
"keywords": [
"react",
"workshop",
"intro",
"redux"
],
"bugs": {
"url": "https://github.com/btholt/complete-intro-to-react/issues"
},
"homepage": "https://github.com/btholt/complete-intro-to-react#readme"
}
webpack.config.js
const path = require('path')
module.exports = {
context: __dirname,
entry: './js/ClientApp.js',
devtool: 'source-map',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
devserver: {
publicPath: '/public/'
},
resolve: {
extensions: ['.js', '.json']
},
stats: {
colors: true,
reasons: true,
chunks: false
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
}
]
}
]
}
}
and the .js file
import React from 'react'
import { render } from 'react-dom'
import '../public/normalize.css'
import '../public/style.css'
const App = React.createClass({
render () {
return (
<div className='app'>
<div className="landing">
<h1>svideo</h1>
<input type="text" placeholder='search' />
<a>or Browse All</a>
</div>
</div>
)
}
})
render(<App/>, document.getElementById('app'));

Answer 1

Capital "S" -->devServer not devserver!