微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ReactJS Webpack:ReferenceError:窗口未定义

如何解决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 举报,一经查实,本站将立刻删除。