Closed albertocorrales closed 3 years ago
@albertocorrales thanks for posting this issue, I'm looking into the problem, and managed to get it to work with a slight change to the import map generation, then removing one of the scopes here:
I will aim to post a comprehensive fix to the import map generator as soon as I can.
Thanks for posting that solution @guybedford . I've tested it to render a button and it worked. However, I see some issues when I try to use some elements, like makeStyles.
For that case I'm seeing error:
Uncaught SyntaxError: The requested module '@material-ui/core' does not provide an export named 'makeStyles' sandbox:102:18
Here I have an example to reproduce it. Do you know how I can solve that?
@albertocorrales this is a problem with Material UI itself - it is exporting a commonjs module (there is no "exports" field pointing to an ESM module), and CommonJS modules have unreliable support for named exports.
Instead you should import the default export:
import MaterialUI from '@material-ui/core';
const { Button, makeStyles } = MaterialUI;
This is basically the common compatibility issue with ES modules.
Example working here -
Actually, this named export should be detected! And it's a bug that it's not. Looking into a fix...
Root cause fixed in https://github.com/guybedford/cjs-module-lexer/pull/51.
@albertocorrales I've updated the generator to fix the original generation bug as well, so the direct generator map should now be working correctly!
Let me know if we are good to close this now, I believe so :) Was some nice bugs to catch.
Hey @guybedford, I've just tested it and it works beautifully.
Thank you so much for your quick response and resolution. Closing this issue.
I need to use material-ui as in browser module with Single SPA, so I'm using JSPM in order to get SystemJS modules.
However, if I import package @material-ui/core version 4.11.3, it throws the following error when I run it on sandbox:
it seems related to babel runtime dependency
Link to sandbox