# Type error while loading an external library

**URL:** <https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757>\
**Category:** DoneJS\
**Created:** [November 18, 2017, 9:45pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757 "2017-11-18T21:45:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 18, 2017, 9:45pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/1 "2017-11-18T21:45:26Z")

</div>

I’m trying to load this through import: [https://github.com/carbon-design-system/carbon-components](https://github.com/carbon-design-system/carbon-components)

As I try:

`import {Modal} from 'carbon-components';`  
`Modal.init();`

I get an error saying `TypeError: Cannot use 'in' operator to search for 'onfocusin' in undefined` - Why am I getting this error?  
Am I missing it’s dependencies? Should I load the library as a global through steal configuration?

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 19, 2017, 6:52am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/2 "2017-11-19T06:52:23Z")

</div>

I did a minimal implementation and it appears to be OK:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/donejs/original/1X/50f88913c63164d6548eb0693dcaf78f96a6ce98.png)

Perhaps try that also to see if anything looks different from _your_ project and then start adding additional dependencies to check for any adverse interactions (quite unlikely)

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 19, 2017, 7:22am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/3 "2017-11-19T07:22:29Z")

</div>

@eben_roux - Can you try loading data tables or other components? `{DataTablesV2}` or `{OverflowMenu}`?

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 19, 2017, 8:02am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/4 "2017-11-19T08:02:18Z")

</div>

I also tried loading it like this in my `index.stache` file  
`<script src="/node_modules/carbon-components/scripts/carbon-components.js"></script>`

While loading the development server I see carbon components being loaded but when the server finishes loading none of the component’s JS work anymore.

Does it have to do anything with VirutalDOM or SSR?

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 19, 2017, 8:05am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/5 "2017-11-19T08:05:49Z")

</div>

Those two actually fail.

I did notice that a `umd` version is included. Bootstrap v4 makes use a `popper.js` and also has to be referenced using that specific dependency (got that from [https://forums.bitovi.com/u/frank-dspeed](https://forums.bitovi.com/u/frank-dspeed)).

Let me give that a go and I’ll get back to you in a while.

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 19, 2017, 9:18am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/6 "2017-11-19T09:18:23Z")

</div>

@eben_roux - If I initiate it like this through window…

`window.CarbonComponents.componentClasses.forEach((Clz)=>{ Clz.init(); });`

After the browser finishes rendering, all component’s JS is functional now but I don’t know if this is the right solution.

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 19, 2017, 10:45am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/7 "2017-11-19T10:45:51Z")

</div>

I’ve tried a couple of scenarios and I cannot get it to work as I would expect it to work given the explanations in the docs.

I’m afraid you will have to get assistance from someone that understands StealJS a bit better ☹

Perhaps see if someone is available on [gitter](https://gitter.im/stealjs/steal).

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [November 20, 2017, 6:01pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/8 "2017-11-20T18:01:07Z")

</div>

Hi @rehat101, you should be able to load `carbon-components` with StealJS.

I’d like to help with this but I’m not sure how to reproduce the issue; would you mind creating a small sample project or sharing more of your code (specifically what comes after trying to use `import`)?

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 21, 2017, 2:06am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/9 "2017-11-21T02:06:11Z")

</div>

@chasen - [https://github.com/rehat101/carbon](https://github.com/rehat101/carbon) - when you first start the app you’ll see an error …

`TypeError: Cannot use 'in' operator to search for 'onfocusin' in undefined`

but if you reload the error goes away. I’ve added a carbon component in the `index.stache` file for testing. The problem is…none of the components get initialized except the modal.

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [November 21, 2017, 3:32am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/10 "2017-11-21T03:32:37Z")

</div>

You’re awesome @rehat101, thanks for providing a sample project.

Here’s the code that’s throwing the error:

```auto
var hasFocusin = 'onfocusin' in (target.nodeType === Node.ELEMENT_NODE ? target.ownerDocument : target).defaultView;

```

I am almost positive that this is a limitation of [can-simple-dom](https://www.npmjs.com/package/can-simple-dom), which is the DOM implementation shipped with `done-ssr`. [jsdom](https://www.npmjs.com/package/jsdom) has many more features, and we created [can-zone-jsdom](https://www.npmjs.com/package/can-zone-jsdom) to make it easier to use with our SSR/Zone packages, but I’m not 100% sure the easiest way to use it (short of [creating your own SSR server](https://donejs.com/ssr-react.html#adding-a-server)).

I’ll ask @matthewp for his advice and get back to you tomorrow on whether my assumption is correct and how best to proceed.

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 21, 2017, 1:44pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/11 "2017-11-21T13:44:14Z")

</div>

@chasen I’ll be waiting for your answer to proceed further

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [November 21, 2017, 7:51pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/12 "2017-11-21T19:51:30Z")

</div>

Pretty sure this is can-simple-dom. Without looking at the code I think it’s likely missing `defaultView`. If you file a bug I might be able to fix it.

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [November 21, 2017, 7:52pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/13 "2017-11-21T19:52:45Z")

</div>

Fix would likely go here I believe: [https://github.com/canjs/can-vdom/blob/master/make-window/make-window.js#L42](https://github.com/canjs/can-vdom/blob/master/make-window/make-window.js#L42)

`global.document.defaultView = global`

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 22, 2017, 4:12am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/14 "2017-11-22T04:12:12Z")

</div>

@matthewp where would you like me to file the issue? I’m currently stuck and can’t get any of the JS working from the carbon-component library.

Can I try to add the fix myself so I can proceed further?

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 22, 2017, 4:19am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/15 "2017-11-22T04:19:28Z")

</div>

@matthewp - when I add that line to `make-window.js` and ran the project I get this error now

`TypeError: target.querySelectorAll is not a function`

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [November 22, 2017, 1:14pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/16 "2017-11-22T13:14:24Z")

</div>

It’s very likely that this library needs more APIs than our simple vdom provides; querySelectorAll is another one. So you have 2 options:

The easy option is to not run this library’s code in SSR. For example, you can use the `detect-node` to wrap your Modal.init like so:

```auto
import {Modal} from 'carbon-components';
import isNode from 'detect-node';

if(!isNode) {
  Modal.init();
}

```

The other option, if you really need SSR is to use jsdom instead.This is a bit more advanced though. See the SSR guide on [donejs.com](http://donejs.com), especially [this section](https://donejs.com/ssr-react.html#zones) if you want to try that (note that the HTTP/2 parts you don’t need for your case).

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 22, 2017, 6:10pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/17 "2017-11-22T18:10:52Z")

</div>

@matthewp - Do I add this in `app.js` ? I did try adding it there and after running I still am getting the same error as above.

`TypeError: target.querySelectorAll is not a function`

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 22, 2017, 6:13pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/18 "2017-11-22T18:13:09Z")

</div>

I must just add here that I never tried with done-ssr. I couldn’t get the components imported using a vanilla application. Perhaps my configuration was shaky though 🙂

---

<div class="post-metadata">

**Author:** ![matthewp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/matthewp/32/77_2.png) [@matthewp](https://forums.bitovi.com/u/matthewp)\
**Post date:** [November 22, 2017, 6:26pm UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/19 "2017-11-22T18:26:25Z")

</div>

Probably not app.js no, wherever it is that you are instantiating these components. I don’t know where `target.querySelectorAll` is called, but that’s the part you that you want to not run in Node.

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 25, 2017, 5:30am UTC](https://forums.bitovi.com/t/type-error-while-loading-an-external-library/757/20 "2017-11-25T05:30:17Z")

</div>

@rehat101: did you manage to get this resolved?