集成两个react项目时出现问题:在index.hml中阻止了javascrpit导入



我正在使用机身反应面板作为我的项目的样板(https://github.com/0wczar/airframe-react(,现在我需要将ZOOM-web-sdk添加到其中,ZOOM提供了一个单独运行的示例react项目(https://github.com/zoom/sample-app-web本地文件夹中的本地版本(

为了使zoom-sdk工作,它需要导入一些java脚本(查看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”.

我有一种感觉,这与主机项目的webpack有关(机身,我正试图将sdk样本导入的那个(

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

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

有人能帮我指明正确的方向吗?因为我不需要知道为什么有脚本被屏蔽,我在谷歌上找到的只是CSS,而不是js模块

从缩放示例应用程序中,您似乎可以跳过添加脚本,将以下内容添加到机身项目中的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安装,并注意不要添加重复项。在大多数情况下,如果有副本,请保留版本号较高的副本。

相关内容

最新更新