DeloitteAU / react-habitat

⚛️ 🛅 A React DOM Bootstrapper designed to harmonise a hybrid 'CMS + React' application.
Other
261 stars 42 forks source link

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

Closed dennis-ryan closed 6 years ago

dennis-ryan commented 6 years ago

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 commented 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 Githubissues.

  • Githubissues is a development platform for aggregating issues.