DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

I know what this is and why this happens, this is not a "what is this error" question and is not a duplicate of that question.

Very specifically:

Using VueJS 3 and google maps api, webpack is attempting to traverse the style sheets from google, which won't work because of cross site protections. That's perfectly fine, but why is it attempting this in the first place and how do I make it just not do that?

CodePudding user response：

reactive is doing deep reactive conversion. shallowReactive is not enough because it still does reactive conversion of the top level object and it's properties.

What you want is shallowRef

CodePudding user response：

I ran into this once weeks ago, finally figured it out, then ran into it again and forgot how I figured it out. In case someone else comes by (hello, future me):

Turning the map object from window.google.maps.Map into a reactive causes Vue/webpack to attempt to traverse the entire object, including references to stylesheets in that object

shallowReactive doesn't work either.