Intersecting imorts

[Hammer2900]

Trying to reproduce examples from the material-ui documentation, I found an unpleasant thing.
This library uses other libraries for example to display icons.
To use this functionality I need to import and substitute the required component in the template, but it turns out that if I import these libraries together, the second library can not be imported.
Here's a small example. If you do import one library, everything works, but if you import them two, the second library is not available.
How can we get out of this situation, can anyone face ?

Parent element import source {"source":"from-template/@material-ui/core@^5.0.js","sourceType":"NAME"} does not match child's import source {"source":"from-template/@material-ui/icons.js","sourceType":"NAME"}

import idom
from idom.server.sanic import SharedClientStateServer
from sanic import Sanic

app = Sanic('Template')

# mui = idom.web.module_from_template('react', '@material-ui/core@^5.0', fallback='⌛')
# Container = idom.web.export(mui, 'Container')
# Item = idom.web.export(mui, 'Item')
# Typography = idom.web.export(mui, 'Typography')
# Icon = idom.web.export(mui, 'Icon')
# Box = idom.web.export(mui, 'Box')
# AppBar = idom.web.export(mui, 'AppBar')
# Toolbar = idom.web.export(mui, 'Toolbar')
# IconButton = idom.web.export(mui, 'IconButton')

muii = idom.web.module_from_template('react', '@material-ui/icons', fallback='⌛1')
Menu = idom.web.export(muii, 'Menu')


# @idom.component
# def Nav():
#     return Box(
#         {'sx': {'p': 3, 'border': '1px dashed grey'}},
#         AppBar(
#             {'position': 'static'},
#             Toolbar(
#                 {'variant': 'dense'},
#                 IconButton(
#                     {
#                         'size': 'large',
#                         'edge': 'start',
#                         'color': 'inherit',
#                         'aria-label': 'open drawer',
#                         'sx': {'mr': 2},
#                     },
#                     Menu(),
#                 ),
#                 Typography(
#                     {
#                         'variant': 'h6',
#                         'noWrap': 'true',
#                         'component': 'div',
#                         'sx': {'flexGrow': 1, 'display': {'xs': 'none', 'sm': 'block'}},
#                     },
#                     'MUI',
#                 ),
#             ),
#         ),
#     )


@idom.component
def Index():
    count, set_count = idom.hooks.use_state(lambda: {})
    input, set_input = idom.hooks.use_state(0)

    return idom.html.div(
        {'class': 'container-fluid', 'style': {'padding': '25px'}},
        idom.html.link({'href': 'https://fonts.googleapis.com/icon?family=Material+Icons', 'rel': 'stylesheet'}),
        idom.html.h1({}, 'Working...'),
        # Nav(),
        Menu(),
    )


per_client_state = SharedClientStateServer(Index, app=app)

per_client_state.run('localhost', 5000)

[rmorshea]

I hadn't considered this case. I think the way to resolve this is to perform a check that, if the import sources are different, that they have the same scope. In this case that would mean if the two import sources both come from @material-ui then it's OK.

[rmorshea]

I've created an Issue to track this: #535