How to work with VK widgets in react spa?

Question

React

Good afternoon. I can’t figure out how to connect the VK widget in react spa.
For example, VK provides the widget code:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?150"></script>

<!-- VK Widget -->
<div id="vk_allow_messages_from_community"></div>
<script type="text/javascript">
VK.Widgets.AllowMessagesFromCommunity("vk_allow_messages_from_community", {height: 30}, 2158488);
</script>

I add the first part directly to index.html

<script type="text/javascript" src="//vk.com/js/api/openapi.js?150"></script>

And here's how to work with the rest of the code inside the component:

VK.Widgets.AllowMessagesFromCommunity("vk_allow_messages_from_community", {height: 30}, 2158488);
VK.Observer.subscribe("widgets.allowMessagesFromCommunity.allowed", function f(userId) {
console.log(userId);		    	
});

VK.Observer.subscribe("widgets.allowMessagesFromCommunity.denied", function f(userId) {
console.log(userId);			    	
});

Inserting code into a component results in a build error (in principle, it is clear why):
'VK' is not defined no-undef
We need to get the userId in the component code, which allowed / denied sending messages
. Does anyone have any ideas how to fix this?

Answer 1

Inserting code into a component results in a build error (in principle, it is clear why):
'VK' is not defined no-undef

most likely eslint swears try to add to the beginning of the file
/* global VK */