如何防止 object 和 function 名称在不同的.js 文件中发生冲突

Question

I just added google analytics to my site. About 25% of the time when it loads, i get the following error from the google analytics file:

Uncaught TypeError: a.slice is not a function

I believe that it is naming interference between objects and functions within two .js files that are on the site, the google analytics js file and I'm not sure what other one. When i add a breakpoint in the google analytics file, I can see that when the error occurs, a is referencing an object in another file. It shows up under scope>local in the debugger, and says that it is an object from page.js . I've went through that file and made sure that there are no objects or functions named that. I believe that it actually coming from leaflet.js which I am using. It seems to be a race condition as to which one loads first gets the name. If the analytics file loads first, all's well and everything works correctly, otherwise I get the error.

It is beyond me to change the leaflet file and I have no control over those two files. Is there some way I can prevent conflict between the two files?

Answer 1

Well... It is not an elegant solution, but you could force leaflet load after analytics loads.

Still. Stackoverflow uses analytics and I'm not seeing a global a object declared. And I've worked with analytics for a while now and never seen it declaring something as ambiguous as a. Having something like a in global scope reminds me of minified, unclosured code in global scope. Which may be your problem.

This may come from GTM, if leaflet is deployed through it.

Anyhow, you didn't do enough debugging. Try blocking requests to certain JS files to find out exactly which libraries cause the race condition. Also make sure GTM is not a case here since it often happens there because people tend to deploy custom html tags of unclosured but minified code. Causes exactly this situation.