webpack-cli TypeError ERR_INVALID_ARG_TYPE: The "path" argument must be of type string. Received an instance of Array

Question

[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an` instance of Array at new NodeError (node:internal/errors:399:5) at validateString (node:internal/validators:163:11) at Object.resolve (node:path:171:9) at getFullTemplatePath (D:\Study\Webpack\node_modules\html-webpack-plugin\index.js:1028:66) at hookIntoCompiler (D:\Study\Webpack\node_modules\html-webpack-plugin\index.js:174:22) at D:\Study\Webpack\node_modules\html-webpack-plugin\index.js:104:9 at Array.forEach (<anonymous>) at D:\Study\Webpack\node_modules\html-webpack-plugin\index.js:103:20 at Hook.eval [as call] (eval at create (D:\Study\Webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1) at Hook.CALL_DELEGATE [as _call] (D:\Study\Webpack\node_modules\tapable\lib\Hook.js:14:14) { code: 'ERR_INVALID_ARG_TYPE' }

I try update: webpack-cli, but is`nt working

My webpack.config.js

Hi everyone, i didn't catch where  do I find a solution to this  problem


const path = require('path')
const  HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin = require("terser-webpack-plugin")

const isDev = process.env.NODE_ENV === 'development'
const isProt = !isDev

const optimization = () => {
    const config = {
        splitChunks: {
            chunks: 'all'
        }
    }
    if (isProt) {
        config.minimizer = [
            new CssMinimizerPlugin(),
            new TerserWebpackPlugin()
        ]
    }
    return config
}

const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`

const cssLoaders = extra => {
 const loaders = [
        {
            loader: MiniCssExtractPlugin.loader
  },
    'css-loader'
 ]
    if (extra) {
        loaders.push(extra)
 }
    return loaders
}

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: ['@babel/polyfill', './index/js'],
        analytics: './analytics.js'
    },
    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: ['.js','.json','.png']
    },
optimization: optimization(),
devServer: {
        port: 4200,
        hot: true
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: ['./index.html'],
            minify: {
                collapseWhitespace: isProt
}
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns:[
            {
                from: path.resolve(__dirname, 'src/favicon.ico'),
                to: path.resolve(__dirname, 'dist')
            }]
    }),
    new MiniCssExtractPlugin({
        filename: filename('css')
    })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: cssLoaders()
            },
            {
                test: /\.less$/,
                use: cssLoaders('less-loader')
},
            {
                test: /\.(sass|scss)$/,
                use: cssLoaders('sass-loader')
},
            {
                test: /\.(png|jpg|svg|gif)$/,
                type: 'asset/resource'
},
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: ['file-loader']
            },
            {
                test: /\.xml$/,
                use: ['xml-loader']
            },
            {
                test: /\.csv$/,
                use: ['csv-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
               }
            }
        }
        ]
    }
}

My package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "webpack practise",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --mode development",
    "build": "cross-env NODE_ENV=production webpack --mode production",
    "watch": "cross-env NODE_ENV=development webpack --mode development --watch",
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
  },
  "browserslist": "> 0.25%, not dead",
  "keywords": [
    "js",
    "javascript",
    "webpack"
  ],
  "author": "V.B",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "csv-loader": "^3.0.5",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.5",
    "node-sass": "^8.0.0",
    "papaparse": "^5.4.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "terser-webpack-plugin": "^5.3.7",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "jquery": "^3.6.4",
    "normalize.css": "^8.0.1"
  }
}

I don't understand how to find this Array, and how to fix it, every post on StackOverflow is so close but not it

Lin Du · Answer 1 · 2023-04-27T07:28:16.627

From the html-webpack-plugin#options doc, we know the template option is a string type, it doesn't support string array.

Take a look at the source code, the template option will be passed in getFullTemplatePath function, it will be passed in path.resolve(context, resolve).

webpack.config.js:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        }
      }
    ],
  },
  plugins: [
    new HTMLWebpackPlugin({
      // template: ['./index.html'],
      template: './index.html'
    })
  ]
};

package version:

"html-webpack-plugin": "^5.5.1",
"webpack": "^5.80.0",
"webpack-cli": "^5.0.2"

webpack-cli TypeError ERR_INVALID_ARG_TYPE: The "path" argument must be of type string. Received an instance of Array

1 Answers1