“未定义窗口中的错误” webpack 上的 webpack 一般错误 --mode=production --env.prod

Posted 2023-03-07

【中文标题】“未定义窗口中的错误” webpack 上的 webpack 一般错误 --mode=production --env.prod

【英文标题】："ERROR in window is not defined" webpack general error on webpack --mode=production --env.prod

【发布时间】：2018-10-03 12:38:58

【问题描述】：

我正在尝试部署我的第一个 Angular 应用程序，但在执行部署期间，在命令中间：

node node_modules/webpack/bin/webpack.js --mode=production --env.prod

（又名webpack --mode=production --config webpack.config.js --env.prod）

我收到一个一般性错误，它没有为我提供比以下更多的信息：

Hash: 7b126cdcbdda85d6b0f304152e501136ec85ed58
Version: webpack 4.6.0
Child
    Hash: 7b126cdcbdda85d6b0f3
    Time: 13298ms
    Built at: 2018-04-23 12:27:51
     1 asset
    Entrypoint main-client = main-client.js

    ERROR in window is not defined
Child
    Hash: 04152e501136ec85ed58
    Time: 13281ms
    Built at: 2018-04-23 12:27:51
     1 asset
    Entrypoint main-server = main-server.js

    ERROR in window is not defined

Main-server 和 Main-client 都是 webpack 生成的文件，我的代码中“window”的唯一用法是执行window.history.back() 命令，但即使注释它，错误仍然出现。

有人知道怎么解决吗？

我的 webpack 版本是 4.6.0 我的 webpack.config.js 内容如下： || ===> 更新 - 与问题本身无关的不必要的 webpack.config.js 内容

【参考方案1】：

这可能是因为您在代码中的某处直接引用了window。这不是最佳做法！！有时，（服务器端）未定义窗口对象并导致此问题。如果第三方库使用它，则相同。

所以首先检查你的代码，直接找到你在哪里使用 window 并像这个例子一样包装在一个 PLATFORMID 中：

 import  PLATFORM_ID  from '@angular/core';
 import  isPlatformBrowser, isPlatformServer  from '@angular/common';
 
 constructor(@Inject(PLATFORM_ID) private platformId: Object)  ... 
 
 ngOnInit() 
   if (isPlatformBrowser(this.platformId)) 
      // Client only code.
      ...
   
   if (isPlatformServer(this.platformId)) 
     // Server only code.
     ...
   
 

或者，如果您找不到它，可能是某个库仍在使用它。在github上查看这个问题，它会比我更好地解释你的问题：

https://github.com/webpack/react-starter/issues/37

希望这对你有帮助 =)

PS：当我不得不实现服务器端渲染时，同样的问题。我在代码中使用window EVERYWHERE。从那一刻起，当我必须使用它时，我总是会找到另一种方法来做同样的事情。

您也可以尝试将target: "web" 放入您的 webpack.config.js 中

---

来自提问者的编辑

另见github上的这个问题，它提供了这个问题的解决方案： https://github.com/webpack/webpack/issues/7112

【讨论】：

谢谢卢卡。我认为这个问题与某个库有关，因为我刚刚用 Angular 的内置 location.back() 功能替换了我所有的 Windows 事件。顺便问一下，如何检查一个库是否在使用“window”？

不幸的是，我没有您问题的确切答案，但我发现在我的项目中，在 node_modules 上执行find in folder，显然不包括 @angular 和 selenium（或来自角度cli依赖）。这不是一个完美的方法，但我发现了一些对 window.document 和 window.location 的引用

谢谢！通过使用 TotalCommander 进行搜索，我发现 JQuery 正在使用“窗口”。我需要找到解决方法。如果可行，我会将您的答案标记为已接受，否则我会在另一条评论中告诉您。到此为止，非常感谢！ :)

我已经删除了 JQuery 模块，但问题仍然存在。我发现有很多必要的模块使用它，甚至是 Angular Native 的模块。您知道如何在不删除库的情况下避免此问题吗？提前致谢！

您的编辑足够接近可以回答问题。但我仍然建议将您的窗口包装在一个平台 ID 案例中（如果您直接引用窗口或一些这样做的库方法）。您可以尝试将“web”放入您的 webpack 配置 target 吗？