ReactJS Webpack：ReferenceError：窗口未定义

问题描述

我在React JS中使用webpack。这是我的错误，

错误出现错误：/Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src：58758 var theme = window.matchMedia && window.matchMedia（'（prefers-color-scheme：dark）'）。matches ^ ReferenceError：未定义窗口

• src：58758对象../node_modules/react-axe/dist/index.js /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:58758:13

• src：113496 webpack_require /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113496:42

• src：38954模块../node_modules/html-webpack-plugin/lib/loader.js!./src/index.js /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:38954:13

• src：113496 webpack_require /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113496:42

• src：113646 /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113646:18

• src：113647 /Users/prakash/Desktop/projects/limitscale/goal.ly/goaly-react/src:113647:12

• index.js：321 HtmlWebpackPlugin.evaluateCompilationResult [goaly-react] / [html-webpack-plugin] /index.js:321:28

• index.js：237 [goaly-react] / [html-webpack-plugin] /index.js:237:22

• task_queues.js：93 processTicksAndRejections 内部/进程/task_queues.js:93:5

和我的webpack配置文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


const ROOT_DIRECTORY = path.join(__dirname,'..')
const SRC_DIRECTORY = path.join(ROOT_DIRECTORY,'src')
const devMode = process.env.NODE_ENV !== 'production';

const plugins = [];
plugins.push(new HtmlWebpackPlugin({
    template: path.join(SRC_DIRECTORY,'')
  })
  );
plugins.push( new CopyWebpackPlugin({
    patterns: [
        { from: path.join(SRC_DIRECTORY,'assets'),to: path.join(ROOT_DIRECTORY,'build') }
    ],}));

plugins.push(new MiniCssExtractPlugin())

const config = {
  entry: [path.resolve(__dirname,'../src/index.js')],output: {
    globalObject: "this",path: path.resolve(__dirname,'../build'),// filename: 'bundle.js',filename: '[name].[hash:8].js',sourceMapFilename: '[name].[hash:8].map',chunkFilename: '[id].[hash:8].js',publicPath: '/',},mode: 'development',resolve: {
    modules: [path.resolve('node_modules'),'node_modules'],extensions: [".jsx",".js"]
  },performance: {
    hints: false
  },plugins: plugins,module: {
    rules: [
        {
            test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
              loader: "babel-loader"
            }
          },{
            test: /\.html$/,use: [
              {
                loader: "html-loader"
              }
            ]
          },{
            test: /\.(s*)css$/,use: [
                MiniCssExtractPlugin.loader,'css-loader','sass-loader'
            ]
        },{
        test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2|png|svg)$/,use: ['url-loader?limit=10000']
      }
    ]
  }
}

module.exports = config

该如何避免该错误？ 面对这个问题一段时间。无法确定。我的代码有任何错误吗？.webpack的新手。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）