0

using webpack to build and run the vanilla javascript project which have node js and express js, webpack build working fine but running after making some changes in webpack.config.js file, it stopped working although build command run successfully

below is the

package.json

 "scripts": {
    "client": "webpack --mode production --config webpack.client.config.js",
    "server": "webpack --mode production --config webpack.server.config.js",
    "clean": "rd /s /q dist >nul 2>&1|echo.>null",
    "start": "node ./dist/server.js",
    "build": "npm run client && npm run server",
  },
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@babel/eslint-parser": "^7.22.9",
    "@babel/register": "^7.0.0",
    "babel-loader": "^9.1.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "eslint": "^8.30.0",
    "eslint-webpack-plugin": "^3.2.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "http-proxy-middleware": "^2.0.6",
    "mini-css-extract-plugin": "^2.7.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-middleware": "^6.0.1",
    "webpack-hot-middleware": "^2.25.4",
    "webpack-node-externals": "^3.0.0"
  },

using below webpack.config.js

webpack.config.js ( config as object )


const plugins = require("./webpack.plugin.config");
const modules = require("./webpack.modules.config");

const baseConfig = {
    entry: { home: './home.js', server: './server/server-dev.js' },
    devServer: {
      static: "./dist",
      open: true,
      hot: true
    },
    output: {
      path: './dist/',
      publicPath: "/",
      filename: "[name].js",
      chunkFilename: "[name].js",
      assetModuleFilename: "assets/[hash][ext][query]",
      clean: true
    },
    plugins: plugins,
    module: modules,
    mode: "production",
    target: "node", // "web"
    node: {
      __dirname: false, 
      __filename: false
    },
    externals: [nodeExternals()],
    devtool: "eval-source-map",
    resolve: {
      extensions: [".html", ".js", ".json", ".css"]
    }
  };

  module.exports = baseConfig;

build working fine and start also working fine.

now

I want to cature env and args value so convert config into method as below

webpack.config.js ( config as method )

const nodeExternals = require("webpack-node-externals");

const plugins = require("./webpack.plugin.config");
const modules = require("./webpack.modules.config");

const config = (env, args) => {
  console.log(env, args);
  return {
    entry: { 
        home: './home.js',
        server: './server/server-dev.js'
    },
    devServer: {
      static: "./dist",
      open: true,
      hot: true
    },
    output: {
      path: "./dist",
      publicPath: "/",
      filename: "[name].js",
      chunkFilename: "[name].js",
      assetModuleFilename: "assets/[hash][ext][query]",
      globalObject: "typeof self !== 'undefined' ? self : this",
      clean: true
    },
    plugins: plugins,
    module: modules,
    mode: "production",
    target: "node", 
    node: {
      __dirname: false,
      __filename: false
    },
    externals: [nodeExternals()],
    devtool: "eval-source-map",
    resolve: {
      extensions: [".html", ".js", ".json", ".css"]
    }
  };
};

module.exports = config;

here webpack build job running fine but when start it npm run start, it just return long webpack config and stops with below error

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

  • configuration should be an object:

so error says it require object, so change last line to

trial 1

module.exports = config();

but here config() require 2 parameter so it is not working

trial 2

now directly write module.exports against method as below

module.export = (env.args) => {

but still facing same error.

trail 3

change config object property using function

const baseConfig = { ... }; module.exports = (env, args) => { console.log(env, args); baseConfig .mode = args.mode; return baseConfig; };

but same error on start.

someone please help to find the issue and suggest how to fix

checked similar question but all solution doesnt work because all ther areusing object config


update

seems like the issue is in server-dev.js file which is using webpack.config.js inside it and here is the content ( shared the relevent code for brevity )

server-dev.js

import express from "express";
import fs from "fs";
import path from "path";
import { webpack } from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import config from "../../webpack.config.js";


const app = express();

const router = express.Router();

const currentDirectory = process.cwd(); // current directory

const DIST_DIR = path.join(path.resolve(currentDirectory, "dist"));
const HTML_DIR = path.join(DIST_DIR, "html");
const HTML_FILE = path.join(HTML_DIR, "index.html");
const compiler = webpack(config);

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

app.use(webpackHotMiddleware(compiler));
xkeshav
  • 53,360
  • 44
  • 177
  • 245

0 Answers0