Cannot configure webpack 2.2.1 correctly, keep throwing WebpackOptionsValidationError

0
votes

the configuration is:

For the .babelrc

{
 "presets": ["react", "es2015", "stage-0"],
 "env": {
 "development": {
  "presets": ["react-hmre"]
  }
 }
}

For the web pack.config.dev.js:

// Dependencies
import webpack from 'webpack';
import path from 'path';

// Paths
const PATHS = {
 index: path.join(__dirname, 'src/index'),
 build: path.join(__dirname, '/dist'),
 base: path.join(__dirname, 'src')
};

export default {
 devtool: 'cheap-module-eval-source-map',
 entry: [
  'webpack-hot-middleware/client?reload=true',
  PATHS.index
 ],
 output: {
  path: PATHS.build,
  publicPath: '/',
  filename: 'bundle.js'
},
plugins: [
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin()
],
module: {
 loaders: [{
   test: /\.js?$/,
   loaders: ['babel-loader'],
   include: PATHS.base
  },
  {
   test: /(\.css)$/,
   loaders: ['style-loader', 'css-loader']
  },
  {
   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  }]
 }
};

And this is for the server file:

// Dependencies
import express from 'express';
import webpack from 'webpack';
import path from 'path';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import open from 'open';

// Webpack Configuration
import webpackConfig from '../../webpack.config.dev';

// Server Port
const port = 3000;

// Express app
const app = express();

// Webpack Compiler
const webpackCompiler = webpack(webpackConfig);

app.use(webpackDevMiddleware(webpackCompiler));
app.use(webpackHotMiddleware(webpackCompiler));

// Sending all the traffic to React
app.get('*', (req, res) => {
 res.sendFile(path.join(__dirname, '../public/index.html'));
});

// Listen port 3000
app.listen(port, err => {
 if (!err) {
  open(`http://localhost:${port}`);
 }
});

and this is the error that I'm getting:

throw new WebpackOptionsValidationError(webpackOptionsValidationErrors); ^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory). at webpack (/Users/yaelyanez/Google Drive/Proyectos/React/hello-world/node_modules/webpack/lib/webpack.js:24:9) at Object. (/Users/yaelyanez/Google Drive/Proyectos/React/hello-world/src/server/index.js:19:25) at Module._compile (internal/modules/cjs/loader.js:654:30) at loader (/Users/yaelyanez/Google Drive/Proyectos/React/hello-world/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/yaelyanez/Google Drive/Proyectos/React/hello-world/node_modules/babel-register/lib/node.js:154:7) at Module.load (internal/modules/cjs/loader.js:566:32) at tryModuleLoad (internal/modules/cjs/loader.js:506:12) at Function.Module._load (internal/modules/cjs/loader.js:498:3) at Function.Module.runMain (internal/modules/cjs/loader.js:695:10) at Object. (/Users/yaelyanez/Google Drive/Proyectos/React/hello-world/node_modules/babel-cli/lib/_babel-node.js:154:22) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: babel-node src/server npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/yaelyanez/.npm/_logs/2018-04-23T20_57_21_731Z-debug.log

2
javascriptnode.jsreactjsnpmwebpack

2 Answers

2
votes

Your configuration file has an incorrect configuration of webpack modules. Instead of loaders, you should be writing rules. The config example should be as follows:

module: {
 rules: [{
   test: /\.js?$/,
   loaders: ['babel-loader'],
   include: PATHS.base
  },
  {
   test: /(\.css)$/,
   loaders: ['style-loader', 'css-loader']
  },
  {
   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
  }]
 }

Also write your webpack config file in CommonJS. For further configuration details refer to the webpack docs. https://webpack.js.org/concepts/configuration/

0
votes

Should be "loader" instead of "loaders". But i would anyway recommend you to go with webpack 4.

loaders: [{ 
  test: /\.js?$/, 
  loader: 'babel-loader',
  include: PATHS.base 
},
{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader']
}, ...