Error : "ERROR in Cannot read property 'map' of undefined" in reactjs application

Question

在 webpack 配置中我使用 html-webpack-plugin。它从模板创建 html，没关系，但我在控制台中收到错误消息：

ERROR in Cannot read property 'map' of undefined
Child html-webpack-plugin for "../../templates/index.html":

据我所知，这是因为 html-webpack-plugin，但它正确地执行了他的功能 - 从模板创建 html，注入包并放入目标文件夹。我不明白哪里错了

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


const BUILD_DIR = path.resolve(__dirname, 'src/main/resources/static/build/');
const ASSETS_PATH = './assets';

const JS_PATH = 'src/main/resources/static/assets/js'
const TEMPLATE_PATH = 'src/main/resources/static/assets/templates'
const VIEWS_PATH = 'src/main/resources/templates'


var webpack_config = {

    context: path.resolve(__dirname, ASSETS_PATH),

    entry: {
        main: [
            "react",
            "react-dom",
            "react-router"
        ],
        react_app: path.resolve(__dirname, JS_PATH) + "/index.jsx",
    },

    output: {
        filename: 'js/[name].min.js',
        publicPath: '/build',
        path: BUILD_DIR
    },

    resolve: {
        extensions: [' ', '.web.js', '.js', '.jsx', 'css'],
    },

    devtool: ("production" === process.env.NODE_ENV) ? "source-map" : "eval-source-map",

    watchOptions: {
        poll: true
    },

    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                loader: 'babel-loader?compact=true&comments=true&minified=true',
                exclude: /node_modules/
            },
            {
                test: /\.(ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/fonts/'
                    }
                }
            },
            {
                test: /\.(eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/media/'
                    }
                }
            },
            {
                test: /\.jpe?g$|\.ico$|\.gif$|\.png$/,
                exclude: /node_modules/,
                use: {
                    loader: 'file-loader',
                    options: {
                        limit: 1024 * 10,
                        name: '[name].[ext]',
                        outputPath: '/images/'
                    }
                }
            },
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '/css/'
                        }
                    }
                    , 'css-loader'],
            },
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: [
                BUILD_DIR,
                VIEWS_PATH
            ]
        }),
        new HtmlWebpackPlugin({
            title: ' React-APP | Spring-Boot-React-App ',
            template: path.resolve(__dirname, TEMPLATE_PATH) + '/index.html',
            filename: path.resolve(__dirname, VIEWS_PATH) + '/index.html',
            chunks: ['main', 'react_app']
        }),
        new CopyWebpackPlugin([
            {
                patterns: [
                    {
                        from: './images/favicon',
                        to: './images/favicon',
                        toType: 'dir'
                    }
                ]
            }
        ]),
        new MiniCssExtractPlugin({
            filename: '/css/[name].css',
            chunkFilename: '[id].css',
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.min\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {discardComments: {removeAll: true}},
            canPrint: true
        }),
    ]
};

module.exports = webpack_config;

template:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8"/>
    <title>Hello demo</title>
</head>
<body>
<div id="react"></div>
</body>
</html>

package.json:

{
  "name": "react-frontend",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "npm run build",
    "build": "webpack --mode=development --watch -d --output",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "cssnano": "^4.1.10",
    "fetch": "^1.1.0",
    "history": "^5.0.0",
    "jquery": "^3.6.0",
    "nchunk": "0.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
    "webpack-cli": "^4.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-react-constant-elements": "^7.13.10",
    "@babel/plugin-transform-react-inline-elements": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "@babel/runtime": "^7.13.10",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "css-loader": "^5.1.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "4.0.0-alpha",
    "mini-css-extract-plugin": "^1.3.9",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "redux-logger": "^3.0.6",
    "style-loader": "^2.0.0",
    "webpack": "^4.46.0"
  }
}

可能是什么原因？以及如何修复此错误？

Answer 1

终于找到了答案，也许这对某些人有用。错误指的是复制 Webpack 插件配置。 而不是这个：

new CopyWebpackPlugin([{
                patterns: [{
                        from: './images/favicon',
                        to: './images/favicon',
                        toType: 'dir'
                    }]
            }]),

我贴了这个：

new CopyWebpackPlugin({
            patterns: [{
                from: './images/favicon',
                    to: './images/favicon',
                toType: 'dir'
            }]
        }),