Closed dennis-ryan closed 6 years ago
Hi Dennis,
Thanks for taking the time to raise this issue.
It looks like the problem is isolated to the legacy ES5 wrapper that you are using. I always wondered if anyone was actually using it.
I'll have a look into this problem this coming weekend for you.
Can you please confirm your javascript tag appears at the end of the
and/or does not have a defer attribute?Hi Jenna,
thanks for taking a look, and I can confirm that the script tag is in the footer and not using defer attribute.
Hi Dennis,
I've just spent some time updating the examples to use latest React and a setup as close to yours as possible above.
https://github.com/DeloitteDigitalAPAC/react-habitat/tree/develop/packages/example-site-es5
However, I'm unable to replicate your issue. I don't see the warnings in the console.
Can you pretty please provide some more information.
CheckoutApp
? Do you export it as a new single instance?Once I can replicate it, I can fix it for you :)
Hi Jenna,
OK here's what I have:
exports.CheckoutApp = new CheckoutApp();
<div data-component="YourDetails" data-prop-init="${yourDetailsJSON}" data-prop-fields="${formFieldsJSON}"></div>
it's actually Salesforce Commerce Cloud (formerly Demandware)...it's a template language called ISML (internet store markup language, if I remember correctly)
thanks!
Hi Jenna,
I updated my code to ES6 and still seeing the issue. Obviously something else at work here that I'm not seeing.
Hey Jenna,
I know what is happening with this issue, we bundle our JS into a single app.js and we are bootstrapping another habitat for a completely different page. Because the habitat is an IIFE it executes and see's the data-components that it doesn't have any registration for! So I have to do something to ignore the running of this IIFE if it's not the correct page to run it on.
hope that makes sense!
thanks again! Dennis
Hey Dennis,
Yeah I had a feeling the issue was on the implementation.
React Habitat will search the DOM as soon as its instantiated. I think if we get around to #16 you will have more control.
Let me know if you have any other issues.
Jenna
Also ideally you would have just one React Habitat that caters for every page. If you use code splitting your javascript size will stay small.
yeah thanks again, I might be able to remove one or the other and just register all components in one React Habitat. As for code splitting, yes would love to that, being on the Salesforce platform we are on currently is a bit difficult to accomplish but in the future for sure, on the radar.
Hi,
Each of my react components throws the following error on page load BUT they are working fine, just seeing that the following errors are showing in the console (a bit annoying bc not sure what's up):
Here's how I am registering components:
Here are the package details:
Wasn't seeing this issue with prior version of react-habitat was
"react-habitat": "^0.5.0"
thanks, Dennis