未捕获的类型错误：无法读取未定义的属性（读取“本地变量”）

Question

我正在开发一个 google chrome 扩展，今天当我尝试运行 google chrome 扩展时，在 popup.js 中显示如下错误：

popup.js:21888 Uncaught TypeError: Cannot read properties of undefined (reading 'locals')
    at Object../node_modules/element-ui/lib/theme-chalk/message.css (popup.js:21888:12)
    at __webpack_require__ (popup.js:20:30)
    at Module../src/js/popup/index.js (popup.js:38789:96)
    at __webpack_require__ (popup.js:20:30)
    at popup.js:84:18
    at popup.js:87:10

npm 构建成功，但在运行时失败，我没有知道哪里出了问题。这是我的 package.json：

{
  "name": "cruise-radar",
  "version": "0.0.1",
  "description": "Browser extension to detect available RSS and RSSHub for current page",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -w --mode=development --progress --display-error-details --colors",
    "build": "webpack --mode=development --progress --display-error-details --colors",
    "release": "npm run build && zip -r release/radar.zip dist",
    "format": "eslint \"**/*.js\" --fix && prettier \"**/*.{js,scss,less}\" --write",
    "format:staged": "eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,scss,less}\"",
    "format:check": "eslint \"**/*.js\" && prettier-check \"**/*.{js,scss,less}\""
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/Cruise-Radar.git"
  },
  "keywords": [
    "rsshub",
    "rss"
  ],
  "gitHooks": {
    "pre-commit": "npm run format:staged"
  },
  "author": "DIYgod",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/DIYgod/RSSHub-Radar/issues"
  },
  "homepage": "https://github.com/DIYgod/RSSHub-Radar#readme",
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "7.12.1",
    "@fingerprintjs/fingerprintjs": "3.1.2",
    "autoprefixer": "9.8.6",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-component": "1.1.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "copy-webpack-plugin": "6.3.0",
    "css-loader": "5.0.1",
    "cssnano": "4.1.10",
    "eslint": "7.13.0",
    "eslint-config-prettier": "6.15.0",
    "eslint-loader": "4.0.2",
    "eslint-plugin-prettier": "3.1.4",
    "file-loader": "6.2.0",
    "js-wheel": "jiangxiaoqiang/js-wheel",
    "less": "3.12.2",
    "less-loader": "7.0.2",
    "mini-css-extract-plugin": "1.3.0",
    "postcss-loader": "3.0.0",
    "prettier": "2.1.2",
    "prettier-check": "2.0.0",
    "pretty-quick": "3.1.0",
    "sass-loader": "^10",
    "svg-inline-loader": "0.8.2",
    "template-string-optimize-loader": "3.0.0",
    "url-loader": "4.1.1",
    "vue": "2.6.12",
    "vue-loader": "15.9.5",
    "vue-template-compiler": "2.6.12",
    "webpack": "4.44.2",
    "webpack-cli": "3.3.12",
    "yorkie": "2.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.17.2",
    "clipboard": "2.0.6",
    "core-js": "^3.21.1",
    "element-ui": "2.14.0",
    "md5.js": "^1.3.5",
    "psl": "1.8.0",
    "regenerator-runtime": "^0.13.9",
    "route-recognizer": "0.3.4",
    "rss-parser": "3.9.0",
    "sass": "^1.44.0",
    "vue-router": "3.4.9",
    "yarn": "^1.22.17"
  }
}

这是项目 webpack 配置：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

    mode: 'production',

    bail: true,

    devtool: false,

    performance: {
        maxEntrypointSize: 1000000,
    },

    entry: {
        'popup': './src/js/popup/index.js',
        'content': './src/js/content/index.js',
        'background': './src/js/background/index.js',
        'options': './src/js/options/index.js',
        'sandbox': './src/js/sandbox/index.js',
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: '/',
    },

    resolve: {
        modules: ['node_modules'],
        extensions: ['.js', '.less'],
    },

    module: {
        strictExportPresence: true,
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre',
                loader: 'eslint-loader',
                include: path.resolve(__dirname, '../src/js'),
            },
            {
                test: /\.js$/,
                use: [
                    'template-string-optimize-loader',
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            presets: ['@babel/preset-env'],
                            plugins: [
                                [
                                    "component",
                                    {
                                        "libraryName": "element-ui",
                                        "styleLibraryName": "theme-chalk"
                                    },
                                ],
                            ],
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: path.join(__dirname, 'postcss.config.js')
                            }
                        }
                    },
                ],
            },
            {
                test: /\.less$/,
                use: [
                    'vue-style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: path.join(__dirname, 'postcss.config.js')
                            }
                        }
                    },
                    'less-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: path.join(__dirname, 'postcss.config.js')
                            }
                        }
                    },
                    'sass-loader'
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    'limit': 40000
                }
            },
            {
                test: /\.svg$/,
                loader: 'svg-inline-loader'
            },
            {
                test: /\.(ttf|woff)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                },
            },
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: 'src/assets',
                    to: '',
                },
            ],
        }),
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            VERSION: JSON.stringify(require('./src/assets/manifest.json').version)
        }),
    ],

    node: {
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
    },

};

我应该怎么做才能解决这个问题？我尝试使用断点进行调试，但是当我使用扩展时它没有进入断点，仅在我打开弹出页面时显示此错误（没有再次触发错误）。如果我尝试重现该错误，我必须关闭弹出窗口并重新打开它。

经过几个小时的搜索并尝试调试，最后从错误消息中我猜测我的mac book pro系统语言是en，但element-ui现在不支持en（其他计算机语言集zh工作正常）。我只是不知道如何让 element-ui 支持 google chrome 扩展弹出页面中的 en，我只在 popup.js 中使用来自 element ui 的消息：

import { Message } from 'element-ui';

并且没有Vue或其他可以让我设置多语言支持的框架，上下文中只有一个js文件，我应该怎么解决？

Answer 1

我通过将节点版本更改为 12.14.0 来解决此问题。