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

**URL:** <https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535>\
**Category:** Web\
**Created:** [March 10, 2020, 11:40pm UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535 "2020-03-10T23:40:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gabriel.rf0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/gabriel.rf0/32/3438_2.png) [@gabriel.rf0](https://devforum.zoom.us/u/gabriel.rf0)\
**Post date:** [March 10, 2020, 11:40pm UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535/1 "2020-03-10T23:40:57Z")

</div>

I am using airframe react dashboard as the boilerplate for my project ( [https://github.com/0wczar/airframe-react](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](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

---

<div class="post-metadata">

**Author:** ![gabriel.rf0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/gabriel.rf0/32/3438_2.png) [@gabriel.rf0](https://devforum.zoom.us/u/gabriel.rf0)\
**Post date:** [March 11, 2020, 2:59am UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535/2 "2020-03-11T02:59:13Z")

</div>

Asking on StackOverflow helped me understand the problem:

> <https://stackoverflow.com/questions/60627357/problem-integrating-two-react-projects-blocked-javascrpit-import-in-index-hml>

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [March 11, 2020, 4:04pm UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535/3 "2020-03-11T16:04:23Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![gabriel.rf0](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/gabriel.rf0/32/3438_2.png) [@gabriel.rf0](https://devforum.zoom.us/u/gabriel.rf0)\
**Post date:** [March 11, 2020, 11:16pm UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535/4 "2020-03-11T23:16:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [March 12, 2020, 4:31pm UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535/5 "2020-03-12T16:31:18Z")

</div>

Hey @gabriel.rf0,

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

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 7:30pm UTC](https://devforum.zoom.us/t/integrating-sample-web-sdk-into-another-react-project-blocked-javascript-import/8535/6 "2020-08-21T19:30:24Z")

</div>

Closed on August 21, 2020, 7:30pm UTC