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

问题描述

我正在尝试部署我的第一个有角度的应用程序，但是在执行部署过程中，在命令中间:

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

(又名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

主服务器和主客户端都是webpack生成的文件，在我的代码中窗口"的唯一用法是执行window.history.back()命令，但即使注释掉，错误仍然出现.

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.

有人知道如何解决吗?

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

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

推荐答案

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

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.

因此，请首先检查您的代码，找到您正在直接使用window的位置，然后将PLATFORMID包裹在该示例中:

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

或者，如果找不到，则可能是图书馆仍在使用它.在github上检查此问题，它将比我更好地向您解释问题:

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

希望这对您有帮助=)

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

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.

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

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

提出问题的人的编辑

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

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屋！