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