mj-inline-links in custom component breaks

[Rouby]

I am trying to setup a custom component to render a common header between the email templates I am going to create.

import { MJMLElement } from 'mjml-core';
import React, { Component } from 'react';
import Section from 'mjml-section';
import Text from 'mjml-text';
import Column from 'mjml-column';
import Raw from 'mjml-raw';
import Table from 'mjml-table';
import Image from 'mjml-image';
import MJNavbar from 'mjml-navbar';
const { Navbar, InlineLinks, Link } = MJNavbar;

// Tag Name
const tagName = 'mj-bf-header';
// List of parent tags
const parentTag = ['mj-container'];
// If false, the component can contain MJML; if true, it can contain only plain HTML
const endingTag = false;
const defaultMJMLDefinition = {
    content: '',
    attributes: {
    }
};

@MJMLElement
class Header extends Component
{
    render()
    {
        const {
            parentWidth
        } = this.props;

        return (
            <Section parentWidth={parentWidth} padding='0'>
                <Table font-size="12px">
                    <tr>
                        <td style={{ textAlign: 'center', fontWeight: 300, backgroundColor: 'white' }}>
                            ...text
                        </td>
                    </tr>
                </Table>

                <Navbar background-color="#cee3f0">
                    <Column width="20%">
                        <Image width="270px" src="{beacon_src}" href="{beacon_url}"></Image>
                    </Column>
                    <Column width="80%">
                        <InlineLinks>
                            <Link href="http://www.go.some.where">a link</Link>
                        </InlineLinks>
                    </Column>
                </Navbar>
            </Section>
        );
    }

}

Header.tagName = tagName;
Header.parentTag = parentTag;
Header.endingTag = endingTag;
Header.defaultMJMLDefinition = defaultMJMLDefinition;

export default Header;

It works until I insert a Link into InlineLinks. Then it throws with the following error:

/Users/.../node_modules/mjml-navbar/lib/InlineLinks.js:151
    if (mjml.get('tagName') === 'mj-link') {
            ^

TypeError: Cannot read property 'get' of undefined
    at perform (/Users/.../node_modules/mjml-navbar/lib/InlineLinks.js:151:17)

I am using version 3.2.2

[iRyusa]

Hi @Rouby

Looks connected to #489 , dunno why the decorators fails to create the json.

( Not related, but you shouldn't use mj-table outisde of a mj-column and Navbar is already a section so you don't need to wrap it in )

[Rouby]

Hey @iRyusa thanks for the quick reply.

Anything I can do to provide you or others with further intel on this?

[iRyusa]

The whole code for the component is good enough, thanks !

[iRyusa]

Fixing this in MJML 3 branch would require to heavily modify how the decorator works. And as mentioned in #489 we're dropping React as a dependency in MJML4 so this won't be an issue anymore. So i'm closing the issue