Integrating sample web sdk into another react project: blocked javascript import

Meeting SDK Web
1

I am using airframe react dashboard as the boilerplate for my project ( https://github.com/0wczar/airframe-react ) and now I need to add ZOOM web sdk into it, the sample app web react project works just fine on its own ( https://github.com/zoom/sample-app-web local version from Local folder )

As I see in the docs, for the zoom sdk to work it needs to import some javascripts, and when copying over the needed scripts into my project index.html (airframe) chrome is throwing the following error for each of the files imported:

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

I have a feeling this is to do with webpack from the host project (airframe, the one I’m trying to import the sdk sample into)

I found some instructions on webpack documentation to import jquery globally in weback for example but it did not work, so I’m not sure that’s really the problem.

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

Could someone help pointing me in the right direction since I don’t have to knowledge to understand why there scripts are being blocked, all I find on google is regarding CSS and not js modules

2

Asking on StackOverflow helped me understand the problem:

3

Hey @gabriel.rf0,

Glad you were able to resolve the issue.

We are releasing a Sample React Web SDK App soon to help show how to integrate the Web SDK into an react project. Stay updated here: https://github.com/zoom

As for the jQuery issue, jQuery does need to be globally accessible, like adding a script tag to it in index.html, however future versions of the Web SDK will not require you to do this.

Thanks,
Tommy

1 Like
4

Can’t wait for this new sample to come out.
Is there an ETA on this? I’d love to get it within this month

5

Hey @gabriel.rf0,

We will do our best to get it out this month! CC @michael.zoom

Thanks,
Tommy