Проблема интеграции двух реагирующих проектов: заблокированный импорт javascrpit в index.hml

Question

Я использую приборную панель реагирования планера в качестве отправной точки для моего проекта (https://github.com/0wczar/airframe-react), и теперь мне нужно добавить ZOOM web sdk в нее, масштабирование при условии примера проекта реагирования, который прекрасно работает на его собственный (https://github.com/zoom/sample-app-web локальная версия из локальной папки)

Для работы zoom sdk необходимо импортировать несколько javascript-кодов (проверьте файл index. html) и при копировании поверх необходимые скрипты chrome выдают следующую ошибку для каждого из импортируемых файлов:

The resource from “http://0.0.0.0:4100/node_modules/react/umd/react.production.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:4100/node_modules/react-dom/umd/react-dom.production.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:4100/node_modules/redux/dist/redux.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:4100/node_modules/redux-thunk/dist/redux-thunk.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:4100/node_modules/lodash/lodash.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://0.0.0.0:4100/node_modules/jquery/dist/jquery.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “http://0.0.0.0:4100/node_modules/react/umd/react.production.min.js”. consult:165:1
The resource from “http://0.0.0.0:4100/node_modules/react-dom/umd/react-dom.production.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “http://0.0.0.0:4100/node_modules/react-dom/umd/react-dom.production.min.js”. consult:166:1
The resource from “http://0.0.0.0:4100/node_modules/redux/dist/redux.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “http://0.0.0.0:4100/node_modules/redux/dist/redux.min.js”. consult:167:1
The resource from “http://0.0.0.0:4100/node_modules/redux-thunk/dist/redux-thunk.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “http://0.0.0.0:4100/node_modules/redux-thunk/dist/redux-thunk.min.js”. consult:168:1
The resource from “http://0.0.0.0:4100/node_modules/lodash/lodash.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “http://0.0.0.0:4100/node_modules/lodash/lodash.min.js”. consult:169:1
The resource from “http://0.0.0.0:4100/node_modules/jquery/dist/jquery.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Loading failed for the <script> with source “http://0.0.0.0:4100/node_modules/jquery/dist/jquery.min.js”.

У меня такое ощущение, что это связано с веб-пакетом из хост-проекта (планер, тот, который я пробую импортировать образец sdk в)

Я нашел несколько инструкций в документации веб-пакета, например, для импорта jquery глобально в weback, но это не сработало, поэтому я не уверен, что это действительно проблема.

new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })

Может ли кто-нибудь помочь направить меня в правильном направлении, поскольку мне не нужны знания, чтобы понять, почему там блокируются скрипты, все, что я нахожу в Google, касается * 10 21 * а не js модули

Answer 1

Из примера приложения для масштабирования может показаться, что вы можете пропустить добавление сценариев и добавить следующее в ваш пакет: json файл в вашем проекте планера:

"dependencies": { // add to your existing dependencies object, don't make a new one
    "@zoomus/websdk": "^1.7.2",
    "jquery": "^3.4.1",
    "lodash": "^4.17.14",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-redux": "7.1.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0"
  },

И в вашем файле React, который использует Zoom Meeting SDK, просто импортируйте его:

import {ZoomMtg} from '@zoomus/websdk';

Не забудьте запустить установку npm после обновления пакета. json и следите за тем, чтобы не добавлять дубликаты. Если есть дубликат, в большинстве случаев сохраните тот, у которого номер версии выше.