DeloitteAU / react-habitat

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

Import from React Component. #43

Closed NoelBank closed 2 years ago

NoelBank commented 5 years ago

Hey i got every time I use <div data-component="footer"></div> an error:

TypeError: Cannot read property 'createElement' of undefined

links to:

      return r.default.createElement(
        'footer',
        { className: 'footer' },
        r.default.createElement(
          'div',
          { className: 'footer__logo-container' },
          r.default.createElement('img', { className: 'footer__logo' }),
          r.default.createElement(
            'span',
            { className: 'footer__copyright' },
            '© 2019 '
          )
        ),
        r.default.createElement(
          'nav',
          { className: 'footer__nav' },
          r.default.createElement(
            'ul',
            { className: 'footer__nav-list' },
            r.default.createElement(
              'li',
              { className: 'footer__nav-item' },
              'Kontakt'
            ),
            r.default.createElement(
              'li',
              { className: 'footer__nav-item' },
              'Impressum'
            ),
            r.default.createElement(
              'li',
              { className: 'footer__nav-item' },
              'Datenschutz'
            )
          )
        )
      );

The Component

import React from 'react';
import './footer.scss';

const Footer: React.FC = () => (
  <footer className="footer">
    <div className="footer__logo-container">
      <img className="footer__logo" />
      <span className="footer__copyright">© 2019</span>
    </div>
    <nav className="footer__nav">
      <ul className="footer__nav-list">
        <li className="footer__nav-item">Kontakt</li>
        <li className="footer__nav-item">Impressum</li>
        <li className="footer__nav-item">Datenschutz</li>
      </ul>
    </nav>
  </footer>
);

export default Footer;

How I create the Container

import * as ReactHabitat from 'react-habitat';

import footer from '../../frontend/src/components/footer/footer';

class Main extends ReactHabitat.Bootstrapper {
  constructor() {
    super();
    const containerBuilder: ReactHabitat.IContainerBuilder = new ReactHabitat.ContainerBuilder();

    containerBuilder.register(footer).as('footer');

    this.setContainer(containerBuilder.build());
  }
}

const instance = new Main();

declare global {
  interface Window {
    updateHabitat?: (Node?) => void;
  }
}
window.updateHabitat = instance.update.bind(instance);

export default instance;

React Version: 16.8.1 Habitat Version: 1.0.1 Webpack Version: 4.29.3