Tree-shaking drops interleaved modules if not used

App1.js

import React from 'react'
import Nav from './components/Menu' //Didnt use {MobileNav}, will be tree shaken

export default class App extends React {
  render(){
    return (<Nav>)
  }
}

App2.js

import React from 'react'
import ExternalImport,{importDependenciesOf} from 'webpack-external-import' 

export default class App extends React {
  render(){
    // MobileNav isnt going to be there, webpack will tree-shake it out because app1 didnt use it
    return (<ExternalImport src={importDependenciesOf('http://localhost:3002', 'somenamespace', 'Nav')} export="MobileNav"/>)
  }
}

Menu.js

// Menu.js

import React from 'react';

const Nav = ({items}) => {
  return (<nav><ul>{items.map(Item=><Item/>)}</ul></nav>)
}

// not used in App1, and will be tree-shaken as an unused export, but its actually used in App2
export const MobileNav = (things) => {
  return (<nav>{things}</nav>)
}
export default Nav
// Marked with externalize comment, team intends for this file interface to be concumable by other applications
/*externalize:Nav*/