Internet Explorer 11 + babel probably

Questions
1

I run into a serious problem trying to deploy the app on IE 11. (On all other browsers, even on the Edge, the app runs just fine), but regretfully I need IE 11 the most. Web plugins on Outlook Desktop version are using IE 11 :frowning:

The case is extremely weird. I have a routable tabs. Their content is loaded dynamically from a folder. The complete lifecycle of the react component is executed just fine. I see console.log for the constructor, render componentDidMount, etc. In render I removed all the code and put this very simple render method.

render() {
  console.log('tab render');
  return (<div data-name="tab1">TAB1</div>);
}

As an end result I finish in DOM with an empty div. “TAB1” is disappearing. I tried to replace it with spanTAB1/span and with BlockTitleTAB1/BlockTitle and the result is the same. Tabs switching is just fine, only the whole children content of the div is lost. There are no errors reported anywhere!

I tried to replace with the static routable tabs from kitchen sink example and I didn’t have any problems though the example is extremely simplified there. So I tried to recreate with static tab and here is in what I ended:

routes:

export default [
{
    path: '/tab-view/',
    component: TabsRoutable,
    tabs: [
        {
            path: '/',
            id: 'tab1',
            component: Tab1,
        },
        {
            path: '/tab2/',
            id: 'tab2',
            component: Tab2
        }
    ]
}]

in routable-tabs:

render() {
    return (
        <Page pageContent={false}>
            <Toolbar tabbar bottomMd>
                <Link tabLink href="./" routeTabId="tab1">Tab 1</Link>
                <Link tabLink href="tab2/" routeTabId="tab2">Tab 2</Link>
            </Toolbar>
            <Tabs routable>
                <Tab className="page-content" id="tab1"></Tab>
                <Tab className="page-content" id="tab2"></Tab>
            </Tabs>
        </Page>
    )
}

This doesn’t change a thing. my simple Tab1 content is refusing to load in the dom.

My guess is that I have a babel issue and will be very grateful if you can share all presets and plugins that you use when you are testing with IE 11 (if anyone does test with this “awesome piece of software”)

2

Well, this awesome piece of software is not really supported by F7, at least wasn’t tested at all. All other routing and navigation works well? Try also to change Tab’a route from component to plain static

content: '<div> Tab content </div>'

Does it work in this case?

3

As I said your canonic kitchen sink routable-tabs example is working fine. It’s with content there.