Webpack, babel and React Error message

ساخت وبلاگ

Vote count: 0

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 ", "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"
}@gmail.com>

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 ( ) }
})
render(, document.getElementById('app'));
asked 44 secs ago

back soft...
ما را در سایت back soft دنبال می کنید

برچسب : نویسنده : استخدام کار backsoft بازدید : 261 تاريخ : دوشنبه 4 ارديبهشت 1396 ساعت: 14:19

خبرنامه