javascript - 集成两个React项目时出现问题: blocked javascrpit import in index. hml

Question

我正在使用机身 react 仪表板作为我的项目的样板( https://github.com/0wczar/airframe-react )，现在我需要将 ZOOM Web sdk 添加到其中，zoom 提供了一个示例 react 项目，该项目本身可以正常工作( https://github.com/zoom/sample-app-web local本地文件夹中的版本)

为了让 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”.

我有一种感觉，这与宿主项目(airframe，我正在尝试将 sdk 示例导入其中的项目)中的 webpack 有关

我在 webpack 文档上找到了一些说明，例如在 webpack 中全局导入 jquery，但它不起作用，所以我不确定这确实是问题所在。

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

有人可以帮我指出正确的方向吗，因为我不需要了解为什么脚本被阻止，我在谷歌上找到的只是关于 CSS 而不是 js 模块

Answer 1

从 Zoom 示例应用程序来看，您似乎可以跳过添加脚本并将以下内容添加到机身项目中的 package.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"
  },

在使用 Zoom Meeting SDK 的 React 文件中只需导入它即可:

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

请记住在更新 package.json 后运行 npm install，并注意不要添加重复项。在大多数情况下，如果存在重复项，请保留版本号较高的版本。