WebpackOptionsValidationError with webpack-dev-middleware

Question

I don't know how else to get this resolved besides posting all of the code and I have been pulling my hair out for several hours now. I could not find anything about this but I feel like I am just missing something, like maybe using a newer version with an older tutorial.

I am using the following dev dependencies:

"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"html-webpack-plugin": "^2.29.0",
"webpack": "^3.1.0",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"

I am receiving this error when trying to run my server.js

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised
 using a configuration object that does not match the API schema.
 - configuration has an unknown property 'default'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, ex
ternals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, reco
rdsInputPath?, 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.rule
s.
     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: {
           default: ...
         }
       })
     ]
    at webpack (/Users/tworadon/dev/projects/pixie-matter/node_modules/webpack/lib/webpac
k.js:19:9)
    at Object.<anonymous> (/Users/tworadon/dev/projects/pixie-matter/server.js:28:38)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

This is my ES6 server.js file:

import path from 'path';
import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import * as config from './webpack.base.config.js';

const app = express(),
      compiler = webpack(config),
      isDevelopemt = process.env.NODE_ENV !== 'production',
      DEFAULT_PORT = 3000,
      DIST_DIR = path.join(__dirname, 'dist'),
      HTML_FILE = path.join(DIST_DIR, 'index.html');

app.set('port', process.env.PORT || DEFAULT_PORT);

if (isDevelopemt) {
    app.use(webpackDevMiddleware(compiler, {
        publicPath: config.output.publicPath
    }));

    app.get('*', (req, res, next) => {
        compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {
            if (err) {
                return next(err);
            }
            res.set('content-type', 'text/html');
            res.send(result);
            res.end();
        });
    });

} else {
    app.use(express.static(DIST_DIR));
    app.get('*', (req, res) => res.sendFile(HTML_FILE));
}

app.listen(app.get('port'));



// var express = require('express');
// var app = express();
// var path = require('path');
//
// var port = process.env.PORT || 8080;
//
// app.use('/', express.static('dist'))
//
// app.get('/', function(req, res) {
//     res.sendFile(path.join(__dirname + '/dist/index.html'));
// });
//
// app.listen(port, function() {
//   console.log('Serving index.html on port ' + port);
// });

This is my webpack.base.config.js file:

const path = require("path"),
      webpack = require('webpack'),
      HtmlWebpackPlugin = require('html-webpack-plugin');

const TITLE = 'Pixie Matter',
    // DIST_DIR   = path.join(__dirname, "dist"),
    CLIENT_DIR = path.join(__dirname, "src");

module.exports = {
    // context: CLIENT_DIR,

    entry: "./src/main.js",

    output: {
        path: path.join(__dirname, "dist"),
        publicPath: '/',
        filename: "bundle.js"
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: TITLE
        }),
        new webpack.EnvironmentPlugin({
            NODE_ENV: 'development',
            DEBUG: false
        })
    ],

    devtool: 'eval',

    stats: {
        colors: false
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
              presets: ['env']
          }
        //   use: {
        //     loader: 'babel-loader'
        //   }
        }
      ]
    }

};

And this is webpack.prod.config.js

const webpack = require('webpack'),
      baseConfig = require("./webpack.base.config.js");

baseConfig.devtool = "cheap-module-source-map";

module.exports = baseConfig;

Answer 1

Try changing

import * as config from './webpack.base.config.js

to

import config from './webpack.base.config.js';

in server.js