How to integrate two technologies: VK API and React.js?

Question

JavaScript

I'm trying to integrate two technologies: Open VK API and React.
Actually, now a little preface.
I have a React application that I want to connect the VK API to. In the settings of the VK application itself, I configured everything, the application type is standalone. I don't have my own server so I use github-pages. I set up a URL and a domain with subdomains, like the VK API script itself should work.
But, when I try to make a deploy to install my React application with the VK API connected to the github pages, I get the following error:

Creating an optimized production build...
Failed to compile.

./src/Worksheet_selector.js
  Line 23:  'VK' is not defined  no-undef

Search for the keywords to learn more about each error.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-05-19T14_49_25_496Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] predeploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-05-19T14_49_25_652Z-debug.log

That is, the problem is in the React component. There he is:

import React, { Component } from 'react';
import { render } from 'react-dom';


export default function WorksheetSelector(props) {

    // Load groups

// Тут группы я опустил для того, чтобы не растягивать код, это не так важно для контекста вопроса!
    let groupsList = [
       ... 
    ]


    let groups = {
    ...
    };

    // Get groups from VK
    VK.Api.call('groups.getById', {group_ids: groups.join(","), fields: 'members_count', v:"5.73"}, function(res) {
// Тут происходит парсинг групп
// Этот код я запускал на pure JavaScript - всё работает
    });

    ....
// Тут оставшийся код
}

In general, the problem is that I seem to have incorrectly connected the VK api to the react application.
In principle, I did it like this: In the public folder of the project, I opened index.html and connected everything as it was written.

<script src="https://vk.com/js/api/openapi.js?153"; type="text/javascript"></script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    ....

But it looks like I'm incorrectly connecting the VK module itself in react-components. I don't understand how to connect them. And is such integration of technologies even possible?

Answer 1

ESLint validation failed . In react-scripts , an ESLint check with the no-undef rule is run before the build . You can fix it like this: or:

/*eslint-disable */
VK.Api.call({
 /* ... */
});
/*eslint-enable */

Using Global Variables with create-react-app