“窗口中的错误未定义"webpack 上的 webpack 一般错误 --mode=production --env.prod [英] "ERROR in window is not defined" webpack general error on webpack --mode=production --env.prod

问题描述

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

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

(又名 webpack --mode=production --config webpack.config.js --env.prod)

我收到一个通用错误，它没有为我提供比以下更多信息:

<块引用>

哈希:7b126cdcbdda85d6b0f304152e501136ec85ed58版本:webpack 4.6.0孩子哈希:7b126cdcbdda85d6b0f3时间:13298ms建于:2018-04-23 12:27:511 项资产入口点 main-client = main-client.js窗口中的错误未定义孩子哈希:04152e501136ec85ed58时间:13281ms建于:2018-04-23 12:27:511 项资产入口点 main-server = main-server.js窗口中的错误未定义

Main-server 和 Main-client 都是 webpack 生成的文件，在我的代码中window"的唯一用法是执行 window.history.back() 命令但甚至注释它，错误依旧.

有人知道怎么解决吗?

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

解决方案

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

所以首先检查你的代码，找到你直接使用 window 的地方，然后像这个例子一样包裹在一个 PLATFORMID 中:

 import { PLATFORM_ID } from '@angular/core';从@angular/common"导入 { isPlatformBrowser, isPlatformServer };构造函数(@Inject(PLATFORM_ID)私有平台ID:对象){ ... }ngOnInit() {如果(isPlatformBrowser(this.platformId)){//客户端唯一的代码....}如果(isPlatformServer(this.platformId)){//仅服务器代码....}}

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

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

希望对你有帮助=)

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

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

<小时>

来自提问者的编辑

在github上也看到这个问题，它提供了这个问题的解决方案:https://github.com/webpack/webpack/issues/7112

I'm trying to deploy my first angular app but during the execution of deploy, in the middle of the command:

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

(A.K.A. webpack --mode=production --config webpack.config.js --env.prod)

I get a generic error which does not provide me more informations than the following:

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 and Main-client are both webpack-generated files and the only usage of "window" in my code is to execute the window.history.back() command but even commenting it, the error still comes up.

Does anyone knows how to solve it?

My webpack version is 4.6.0 and my webpack.config.js content is the following:
||
===> UPDATE - unnecessary webpack.config.js content as not related to the issue itself

解决方案

This is probably cause because you're referring to window directly somewhere in your code. THIS IS NOT BEST PRACTISE!! Sometimes, (Server side) the window object is not defined and cause this problems. Same if a third-part library uses that.

So check your code first, find where you're using window directly and wrap inside a PLATFORMID like this example:

 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.
     ...
   }
 }

Or, if you can't find it, probably a library is still using it. Check this issue on github, it will explain you better than me the problem:

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

Hope this will help you =)

PS: same problem when i had to implement a Server Side Rendering.. I was using window EVERYWHERE in code. From that moment, when i have to use it, i always find another way to do the same thing.

You could also try putting target: "web" inside your webpack.config.js

---

EDIT FROM THE ONE WHO ASKED THE QUESTION

See also this issue on github, it provides the solution for this issue: https://github.com/webpack/webpack/issues/7112

这篇关于“窗口中的错误未定义"webpack 上的 webpack 一般错误 --mode=production --env.prod的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！