Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

WebpackOptionsValidationError: Invalid configuration object. I cant deploy my server to try my bundle

Ask Question

I have runned the webpack --mode production to build the dist folder, but it is showing this error when i run the server, the app is running on the developer mode.

I got this error:

C:\Users\Bymet\Documents\Gestor de Inventario\frontend-admin\node_modules\webpack\lib\webpack.js:31 throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration should be an object.

and next something like this:

validationErrors: [ keyword: 'type', dataPath: '', schemaPath: '#/type', params: { type: 'object' }, message: 'should be object', schema: 'object', parentSchema: { definitions: { ArrayOfStringOrStringArrayValues: { type: 'array', items: [Object] }, ArrayOfStringValues: { type: 'array', items: [Object] }, Entry: { anyOf: [Array] }, EntryDynamic: { description: 'A Function returning an entry object, an entry string, an entry array or a promise to these things.', instanceof: 'Function', tsType: '(() => EntryStatic | Promise)'

I have changed the dotenv to the dependencies to deploit on heroku but it "work"

here is my server and my webpack config

import express from 'express';
import webpack from 'webpack';
import { env, port } from '../../config';
const app = express();
if (env === 'development') {
    // console.log('Development config');
    const webpackConfig = require('../../webpack.config');
    const webpackDevMiddleware = require('webpack-dev-middleware')
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const compiler = webpack(webpackConfig);
    const serverConfig = { port: port, hot: true };
    app.use(webpackDevMiddleware(compiler, serverConfig));
    app.use(webpackHotMiddleware(compiler));
app.get('*', (req, res) => {
    res.send(`
    <!DOCTYPE html>
        <html lang="en">
                <link rel="stylesheet" href="assets/app.css" type="text/css">
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Cestina | Administración </title>
            </head>
        <style>
            body{
                margin: 0px;
        </style>
            <div id="root"></div>
            <script src="assets/app.js" type="text/javascript"></script>
        </body>
</html>
app.listen(port, () => {
    console.log(`The server is running on the route http://localhost:${config.port}`)
const path = require('path');
const webpack = require('webpack');
const MINICssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const dotenv = require('dotenv');
const { port, host_name, env} = require('./config');
module.exports = () => {
     /* This configuracion give access to the actions and other react component access to the .env variables */
    const envi = env;
    const envKeys = Object.keys(envi).reduce((prev, next) => {
        prev[`process.env.${next}`] = JSON.stringify(envi[next]);
        return prev;
    }, {});
    return {
        entry: ['./src/front/index.js', `webpack-hot-middleware/client?path=${host_name}/__webpack_hmr&reload=true'`],
        context: path.resolve(__dirname),
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        node: {
            fs: "empty"
        module: {
            rules: [
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    test: /\.(css|scss)$/,
                    use: [
                            loader: MINICssExtractPlugin.loader
                        // 'style-loader',
                        'css-loader',
                        'sass-loader'
                    test: /\.html$/,
                    use: [
                            loader: 'html-loader',
                    test: /\.(png|gif|jpg)$/,
                    use: [
                            'loader': 'file-loader',
                            options: {
                                name: 'assets/[hash].[ext]'
        resolve: {
            extensions: ['.js', '.jsx']
        devServer: {
            historyApiFallback: true,
            hot: true,
            port: port,
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
                "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        plugins: [
            new webpack.DefinePlugin(envKeys),
            new webpack.HotModuleReplacementPlugin(),
            new MINICssExtractPlugin({
                filename: 'assets/app.css'
            new HtmlWebpackPlugin({
                template: "./public/index.html",
                filename: "index.html",
It looks like you're exporting a function to create the configuration object which means you have to call it first before passing to webpack:
const webpackConfig = require('../../webpack.config')(); // call it before passing
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.