Fix the error "globalThis is not defined" on the browser side.

Jan 4, 2023114

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

During development, the production operations team reported that the page was blank and they couldn't access the system. It was discovered that the error was caused by the print-template-designer, specifically the "globalThis is not defined" error. This error is usually encountered when using older versions of browsers. Checking on Can I Use, it was found that globalThis is not supported before Chrome version 70. The solution is either to upgrade the browser version or update the frontend to be compatible with older versions. In this case, the customer was advised to upgrade their browser version to the latest one. Additionally, the issue can be resolved by adding a code in the head section. The code is "this.globalThis || (this.globalThis = this)". It is also recommended to learn more about globalThis by referring to the provided resources.

Read the original article.

Today during development, the production operations and maintenance personnel reported that the page was blank and they couldn't access the system. Upon investigation, I found that it was an error reported by my print-template-designer, which stated that globalThis is not defined.

Actually, I think I have encountered similar errors before, usually due to a low version of the browser.

I checked on Can I Use and found that globalThis is not supported in versions of Chrome prior to 70.

So there are two solutions:

Ask the customer to upgrade their browser version.
Upgrade the front-end to be compatible with lower versions.

In the end, I advised the customer to upgrade their browser version. For Windows 7, the latest version 108 should be sufficient. (By the way, Chrome stopped supporting Windows 7 this year, so 108 should be the last version.)

In terms of code, how can we solve this issue? Just add the following code to the head section.

<head>
  <script>
    this.globalThis || (this.globalThis = this)
  </script>
</head>

Also, let's understand what globalThis is: