reactjs


Webpack, babel and React Error message


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'));
Capital "S" -->devServer not devserver!

Related Links

Passing className prop to Material-ui child/inner elements
Code splitting using webpack for example https://github.com/erikras/react-redux-universal-hot-example
Reactjs calender picker
React with sort and filter
Reactjs not rendering to HTML in Ubuntu 14
Test text input with react and jest
How do I add an image to the DOM after another image has loaded?
why is this.state.records.amount undefined?
How to upload file on server with react, redux
Diagnostics feature in Angular 2 vs React
React- Elegantly Toggle State Visibility
React Single Page app with browserHistory possible?
Assign reducer to nested state property?
ReactJS rendering issue
How to setup a globally available react variable (also available in the browser console)?
Move the logic into new action

Categories

HOME
classification
autohotkey
domain-driven-design
cors
gap-system
liquibase
redhawksdr
bitbucket
xss
google-docs-api
symfony-sonata
glympse
comments
kohana
meson-build
handlebars.js
clip-path
software-collections
oms
chef-recipe
react-select
taxonomy
samba
project-structure
rvm
aws-certificate-manager
ballerinalang
launchd
typeorm
meteor-accounts
azure-table-storage
hierarchy
spring-data-gemfire
mobile-development
jmsserializerbundle
keil
apache-falcon
pyenv
azure-vm-scale-set
scip
mediastream
aspnetboilerplate
quartz
taiga
reqif
pyopenssl
monaca
wink
r-commander
liferay-ide
symantec
deck.js
vitamio
db2-zos
google-app-engine-php
cascading
android-contentresolver
magnet-uri
android-togglebutton
vanilla-forums
textblob
dpkt
photogrammetry
fileinputstream
system.diagnostics
service-broker
data-quality-services
mri
google-experiments
numerical-recipes
attiny
caption
react-os
yosemite
agent-based-modeling
atg-dynamo
behance-api
cs193p
sigma-grid-control
opencobol
data-layers
misfire-instruction
pechkin
cab
qgraphicsscene
leap-year
asp.net-4.0
phone-state-listener
moonscript
states
google-email-audit-api
datasheet
mysql-connector
mcpd
peoplepicker
gmagick
service-layer
jqtransform
moss2007-security
quazip
html5-animation
http-response-codes
arraycollection
browser-state
zend-acl
disk-based
stackless

Resources

Encrypt Message