Kayote Kayote - 18 days ago 8
Javascript Question

Webpack 2 Configuration Error

Im not certain what Im doing wrong, would appreciate some insight into this configuration. I am getting the following error:

ERROR : throw new WebpackOptionsValidationError(webpackOptionsValidationErrors)

/var/www/homelyfe/hl-app/node_modules/webpack/lib/webpack.js:16
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.rules[1].use[0] should be one of these:
string | object { loader?, options?, query? }
- configuration.module.rules[1].use should be one of these:
string | object { loader?, options?, query? } | [string | object { loader?, options?, query? }]
at webpack (/var/www/homelyfe/hl-app/node_modules/webpack/lib/webpack.js:16:9)
at processOptions (/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:310:17)
at Object.<anonymous> (/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:374:1)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:141:18)
at node.js:933:3
error Command failed with exit code 1.


MY WEBPACK CONFIGURATION FILE:

const path = require("path");
const merge = require("webpack-merge");
const htmlWebpackPlugin = require( "html-webpack-plugin" );
const parts = require( "./webpack.config.parts" );
const PATHS = {
app : path.join( __dirname, "app" ),
build : path.join( __dirname, "build" )
};
const TARGET = process.env.BUILD_DEV || process.env.BUILD_PROD;

const common = {
entry : {
app : PATHS.app + "/index.js"
},
output : {
filename : "run.build.js",
path : PATHS.build,
publicPath : "/assets/"
},
resolve : {
extensions : [ "js", "jsx" ]
},
module : {
rules : [
{
test : /\.jsx?$/,
use : [
{
loader : "babel-loader",
options : {
presets : [
"react",
"es2015"
]
}
}
],
include : PATHS.app
}
]
}
};

var config;

switch( process.env.npm_lifecycle_event ){
case( "buildProd" ):
config = merge( common,
parts.defineENV(),
parts.sourceMaps( "__PROD__" ),
{} );
case( "startDev" ):
default:
config = merge( common,
parts.defineENV(),
parts.sourceMaps( "__DEV__" ),
parts.devServer( PATHS.app ),
parts.eslint(PATHS.app, path.join( __dirname, ".eslintrc" )),
parts.devtool(),
parts.htmlWebpackPlugin( "---TESTING---" ));
};

module.exports = config;


Clearly, Im doing something wrong with the merge function, as notified by the error, however, the returned object appears to be fine. Here is the output of the config obj (the main webpack.config obj.):

CONFIGURATION OUTPUT OBJECT:

{
entry:{
app: '/var/www/homelyfe/hl-app/app/index.js'
},
output:{
filename: 'run.build.js',
path: '/var/www/homelyfe/hl-app/build',
publicPath: '/assets/'
},
resolve:{
alias:{
assets: '/var/www/homelyfe/hl-app/app/assets',
components: '/var/www/homelyfe/hl-app/app/components'
},
extensions: [ 'js', 'jsx' ]
},
module:{
rules:[
{ test: /\.jsx?$/,
use:[
{ loader: 'babel-loader',
options : {
presets : [
"react",
"es2015"
]
}
},
],
include: '/var/www/homelyfe/hl-app/app'
},
{ test: /\.jsx?$/,
use: [
{ enforce: 'pre',
loader: 'eslint-loader',
query: [Object] }
],
include: '/var/www/homelyfe/hl-app/app'
}
]
},
plugins:
[ DefinePlugin { definitions: [Object] },
HotModuleReplacementPlugin { multiStep: true, fullBuildTimeout: 200 },
HtmlWebpackPlugin { options: [Object] } ],
devtool: 'eval-source-map',
devServer:
{ historyApiFallback: true,
hot: true,
inline: true,
stats: 'errors-only' } }

Answer

If you look at the schema that validates the config in webpack github repo

"ruleSet-use-item": {
  "anyOf": [
    {
      "$ref": "#/definitions/ruleSet-loader"
    },
    {
      "additionalProperties": false,
      "properties": {
        "loader": {
          "$ref": "#/definitions/ruleSet-loader"
        },
        "options": {
          "$ref": "#/definitions/ruleSet-query"
        },
        "query": {
          "$ref": "#/definitions/ruleSet-query"
        }
      },
      "type": "object"
    }
  ]
}

And then look at your second rule

{ test: /\.jsx?$/,
    use: [ 
      { enforce: 'pre', 
        loader: 'eslint-loader',
        query: [Object] } 
    ],
    include: '/var/www/homelyfe/hl-app/app'
}

You'll se that enforce is not part of ruleSet-use-item. You can only specify loader, options and query there

Comments