Javascript WebPackageOptions验证错误：配置对象无效。我无法部署服务器来尝试我的捆绑包_Javascript_Node.js_Reactjs_Webpack

Javascript WebPackageOptions验证错误：配置对象无效。我无法部署服务器来尝试我的捆绑包

javascript node.js reactjs webpack

Javascript WebPackageOptions验证错误：配置对象无效。我无法部署服务器来尝试我的捆绑包,javascript,node.js,reactjs,webpack,Javascript,Node.js,Reactjs,Webpack,我已经运行了webpack--模式生产来构建dist文件夹，但是当我运行服务器时，它显示了这个错误，应用程序是在开发者模式下运行的我得到了这个错误： C:\Users\Bymet\Documents\Gestor de Inventario\frontend admin\node\u modules\webpack\lib\webpack.js:31 抛出新的WebPackageOptions ValidationError（WebPackageOptions ValidationErrors

我已经运行了webpack--模式生产来构建dist文件夹，但是当我运行服务器时，它显示了这个错误，应用程序是在开发者模式下运行的

我得到了这个错误：

C:\Users\Bymet\Documents\Gestor de Inventario\frontend admin\node\u modules\webpack\lib\webpack.js:31 抛出新的WebPackageOptions ValidationError（WebPackageOptions ValidationErrors）； ^

WebPackageOptions验证错误：配置对象无效。已使用与API架构不匹配的配置对象初始化Web包

配置应该是一个对象

接下来是这样的：

验证错误：[ { 关键字：“类型”，数据路径：“”， schemaPath:“#/type”，参数：{type:'object'}，消息：“应该是对象”，架构：“对象”，父模式：{ 定义：{ ArrayOfStringOrStringArrayValue:{type:'array'，items:[Object]}， ArrayOfsTringValue:{type:'array'，items:[Object]}，条目：{anyOf:[Array]}，入口动态：{ description:'返回条目对象、条目字符串、条目数组或对这些内容的承诺的函数。'， instanceof:'函数'， tsType:“（（）=>EntryStatic | Promise）”

我已将dotenv更改为依赖项，以在heroku上进行开发，但它“起作用”

这是我的服务器和我的网页配置

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">
            <head>
                <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>
        <body>
            <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}`)
})

看起来您正在导出一个函数来创建配置对象，这意味着您必须先调用它，然后才能传递到

webpack

：


const webpackConfig=require（'../../webpack.config'）（）；//在传递之前调用它

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",
            })
        ]
    }
};