ERROR: RHW01 Cannot resolve component "XXX" for element. http://tinyurl.com/jxryd3s#rhw01 Error: Cannot resolve registration.

[dennis-ryan]

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

(index):115 ERROR: RHW01 Cannot resolve component "YourDetails" for element. http://tinyurl.com/jxryd3s#rhw01 Error: Cannot resolve registration.
    at Container.js:95
    at new Promise (<anonymous>)
    at Container.resolve (Container.js:91)
    at _loop (Bootstrapper.js:109)
    at _Mixin._apply (Bootstrapper.js:134)
    at _Mixin.update (Bootstrapper.js:232)
    at _Mixin.setContainer (Bootstrapper.js:180)
    at new _Mixin (createBootstrapper.js:94)
    at Object.createBootstrapper (createBootstrapper.js:157)
    at new OrderHistoryApp (index.js:14)
    at Object.505.../../ajax (index.js:81)
    at o (_prelude.js:1)
    at _prelude.js:1
    at Object.419../ajax (app.js:699)
    at o (_prelude.js:1)
    at r (_prelude.js:1)
    at _prelude.js:1 

Here's how I am registering components:

var ReactHabitat = require('react-habitat'),
	YourDetails = require('./components/YourDetails'),
	SummaryDetails = require('./components/SummaryDetails'),
	GiftMessage = require('./components/GiftMessage'),
	Cart = require('./components/ShoppingCart');

function CheckoutApp() {
	// Create a new react habitat bootstrapper
	this.domContainer = ReactHabitat.createBootstrapper({

		// default options (optional)
		defaultOptions: {
			tag: 'div',                 // (Optional)
			className: 'myHabitat',     // (Optional)
			replaceDisabled: false      // (Optional)
		},

		// Create a new container (Required)
		container: [
			// Register your top level component(s)
			{register: 'YourDetails', for: YourDetails},
			{register: 'SummaryDetails', for: SummaryDetails},	
			{register: 'GiftMessage', for: GiftMessage},
			{register: 'Cart', for: Cart}
		],

		// Should update lifecycle event (Optional)
		// return false to cancel update
		shouldUpdate: function(target, query) {
				return true;
		},

		// Will update lifecycle event (Optional)
		willUpdate: function(target, query) {
		},

		// Did update lifecycle event (Optional)
		didUpdate: function(target) {
		}

	});
}

Here are the package details:

...
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-habitat": "^1.0.1",
...

Wasn't seeing this issue with prior version of react-habitat was "react-habitat": "^0.5.0"

thanks,
Dennis

[jennasalau]

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 <script /> tag appears at the end of the and/or does not have a defer attribute?

[dennis-ryan]

Hi Jenna,

thanks for taking a look, and I can confirm that the script tag is in the footer and not using defer attribute.

[jennasalau]

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.

• How are you executing CheckoutApp? Do you export it as a new single instance?
• Can I please see the HTML you are using for YourDetails.
• What CMS or framework are you using to render the HTML?

Once I can replicate it, I can fix it for you :)

[dennis-ryan]

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!

[dennis-ryan]

Hi Jenna,

I updated my code to ES6 and still seeing the issue. Obviously something else at work here that I'm not seeing.

[dennis-ryan]

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

[jennasalau]

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

[jennasalau]

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.

[dennis-ryan]

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.