webpack packaging vue project IE error, "object does not support "use" attribute or method"

Problem: "Object does not support 'use' property or method"

Recently a project encountered a problem under IE10, and the solution is recorded here.

 

First of all, IE reports an error "The object does not support xx attributes or methods", which means that a certain attribute or method that is not available in IE is used in the code, and we can view the detailed stack information.

You can see that the specific location of the error is the 6:112699 location of this file.

Since the code is compressed, look at it after manual formatting. It seems that there is no use method for the tt object. Add a debugger under IE10 and look at it.

Sure enough tt.use is undefined, so an error is reported. But there is no error under IE11, then add a debugger under IE11 and see

I found that the tt.__proto__.use method exists, and the debugging tools of IE are not very intuitive. Change it to chrome and look at it again.

It can be found that there is indeed a tt.__proto__.use method, so it can be concluded that under IE11 and chrome, tt accesses the use method on the prototype chain, and further investigation finds that IE10 does not support the __proto__ attribute, so The source of the problem has been found.

 

After analysis, the code here should be in swiper, because I introduced vue-awisome-swiper in the project, and vue-awisome-swiper just encapsulates the swiper plugin, so I have to go to the swiper code to find it, and finally found node_module swiper directory under

It is found that swiper uses __proto__ to implement inheritance, locate the code here, you can find that the if here is compatible with IE10 and not compatible with __proto__, and this if judgment is lost after build, I guess it may be due to the default of babel6 The IE series is not supported, so the default __proto__ exists, and the judgment code compatible with __proto__ is directly removed.

 

Solution: Introduce polyfill

Finally introduced this polyfill to solve this problem, https://www.npmjs.com/package/proto-polyfill .

How to use: Just import it at the top of the webpack entry file

import 'proto-polyfill'

over.

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324749563&siteId=291194637