Type error while loading an external library

#1

I’m trying to load this through import: 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?

#2

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

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)

2 Likes
#3

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

#4

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?

#5

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

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

#6

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

#7

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 :frowning:

Perhaps see if someone is available on gitter.

#8

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)?

#9

@chasen - 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.

1 Like
#10

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

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

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, which is the DOM implementation shipped with done-ssr. jsdom has many more features, and we created 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).

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

#11

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

#12

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.

#13

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

global.document.defaultView = global

#14

@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?

#15

@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

#16

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:

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, especially this section if you want to try that (note that the HTTP/2 parts you don’t need for your case).

#17

@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

#18

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 :slight_smile:

#19

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.

#20

@rehat101: did you manage to get this resolved?