Как интегрировать две технологии: VK API и React.js?

Question

[Arti-Jack]

Пытаюсь интегрировать две технологии: Open VK API и React.

Собственно, сейчас небольшое предисловие.

У меня есть React-приложение, в которое я хочу подключить VK API. В настройках самого вк приложения я всё настроил, тип приложения - standalone. У меня нету своего сервера, поэтому я использую github-pages. Настроил URL и домен с поддоменами, вроде сам скрипт VK API должен работать.

Но, когда я пытаюсь сделать deploy, чтобы установить на гитхаб-пэйджес моё реакт приложение с подключенным ВК АПИ, я получаю следующую ошибку:

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! vk_agregator@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vk_agregator@0.1.0 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! vk_agregator@0.1.0 predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vk_agregator@0.1.0 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

Т.е проблема в React-компоненте. Вот он:

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 - всё работает
    });

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

В общем, проблема в том, что я похоже неправильно подключил VK api в реакт приложение.

Я в принципе это так делал: В папке public проекта я открыл index.html и подключил всё, как написано было.

<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>
    ....

Но, похоже, я неправильно подключаю сам VK модуль в реакт-компонентах. Не понимаю ка их надо подключить? И вообще возможна ли такая интеграция технологий?

Answer 1

[Антон Спирин]

Ошибка проверки ESLint. В react-scripts перед билдом запускается проверка ESLint с правилом no-undef.
Исправить можно так:
const VK = window.VK;
или:

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

Using Global Variables with create-react-app