jspm / project

Roadmap and management repo for the jspm project
161 stars 8 forks source link

Error loading @material-ui/core with JSPM #99

Closed albertocorrales closed 3 years ago

albertocorrales commented 3 years ago

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:

Uncaught (in promise) TypeError: u is not a function
    at _interopRequireWildcard (interopRequireWildcard.js? [sm]:21)
    at Object.execute (elementTypeAcceptingRef.js? [sm]:13)
    at i (s.min.js:1)
    at e (s.min.js:1)
    at s.min.js:1
    at Array.forEach (<anonymous>)
    at e (s.min.js:1)
    at s.min.js:1
    at Array.forEach (<anonymous>)
    at e (s.min.js:1)

it seems related to babel runtime dependency

Link to sandbox

guybedford commented 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:

https://jspm.org/sandbox#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

I will aim to post a comprehensive fix to the import map generator as soon as I can.

albertocorrales commented 3 years ago

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?

https://jspm.org/sandbox#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

guybedford commented 3 years ago

@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 -

https://jspm.org/sandbox#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

guybedford commented 3 years ago

Actually, this named export should be detected! And it's a bug that it's not. Looking into a fix...

guybedford commented 3 years ago

Root cause fixed in https://github.com/guybedford/cjs-module-lexer/pull/51.

guybedford commented 3 years ago

The named exports issue is now fixed (and actually will be upstreamed into Node.js core itself).

If you clear your cache, the example should be working at https://jspm.org/sandbox#H4sIAAAAAAAAA71ZbVPbOBD+fPkVajqdgRlsJwQopQkToGmnHKE9Atd7mfug2EossC2fJCeEDv/9Vpbt2CQ2hszcTF7G0u7z7K5WsrTqvnGYLRchQa70veNGN/0j2DluINT1icTIdjEXRPaakZwYh824Q1LpkeObIP53upZ+zlQC7JNec0bJPGRcNpHNAkkCgJhTR7o9h8yoTYz4YQfRgEqKPUPY2CO9NhB0LW1Bd8ycxXHjl65DZ4g6vSZnTDaPuxY8x2TC5jSUCItFYCPB7V7TlTIUR5Y1xeatCH2TMisI/SMiDJ85kUcM4VJf9FtmGz6AI6T1pM/0aQC6ikbDKyZF9sYw0E1gM98HV9BoISTxz0foFI+Jh+DL5mjCOMIBeGSMOZsLwtFghIYxOLLQNUR6pC220PnoDwRxQHPG7yagayLDOE5pUseeuiRi0oJnuulWGGNlBzjWSf0q9hRdSsgSPvhDYND3IfpCAsKxBDe++mro0BCHce/AoRLdXF0cocycVDQz5+1w9/fpn19O/U+HLb4YPZyPbtquPXQvLwZ3cnH3MGyNOpftgfXtohW2h5eDh8vL3x7+ou6v1zfzqHXTOX/o3MwvL4fQPniYfr09ISen++Hn1oer+QkYkcQnCY1K216Txlb6OISs+Qm9SYNoHqGfsd3Nvo8l4Sq/ImrZjBPoKsuSFdn+ntlumx0LBsqkgUPuVRR3NDAn2JYVYHF/v31gtvfMVjmC4TD/ORQlsx4pBnpUeE1hs5DkHF8DmHWquMRZYfEI5rBPYMJ5IeHCwgKyVl67VHzV05I+EKcqZAWY/nuzDfnXqoZbhqDcDtsD1TPseWcuse9eb0ARpxYzhFySM6W3Ae0SpA6nQyY0IN85jCCXi9fTFnHqMJN7WJidDTxNAOpwTYkE0yRTU/fb5PWURZw6zDRwYV7LDdxMEV7CdsGYqFxu6lHGMPV4YfVi4RX5N6KcfCITHHlVK9Sz/GvgXm7HD+o5NuYbLCLr8epYwsa3xJY/qHRZJJNpQckGaVACuIEtGyZJFWodq0ImBB175IwFQvLIhvf5FZERD15vUilkHXuEBztD55qdcI43WAgLMHV45aaM8iVcKjSRjyFIG7M+garFD+sm22D91fpFpvzOSciFVz3JVqUrdlor8PG+tjZ8LP0C+EhSr7bxsbAG3y0Btz1xXwGnuvtts53u2tVzUV8IYwavWMarUDKh/q7ZMg8TrKzVtG+LixTsKI1sk+Y4z213cuL9fRMoLADMFEuROfHZ7Nm91HrwnG4B32XgmhGwwNB7YyGxpHYVfolGvwNnpV0dqRKRlbC5i9AlASSAEaetoQ66VcxrxGGwW+aepRPlKT4VxvLwWAFckIvTp6MdWc2/28rYQ28fjsIH6mCh9FUOQ9uKYdBmhF40BVYbnPDgt/K1tVa+wLRWoorX0TsQI4KTRD3mvEYZd16min3qsTH26vFq2TJG3VvFFRBYs6o2TCuy68awKFHFF8K+QRhClWpqcS7ly3xcSlTxclV0mWEvIsYkCmxJWdW2o1qxKgJrxKvM0ksm+ACnqfvKaViuVBaYJ2IrZuj9nAGLHp1WBaMgp15A8P5YnfshC2FVVU3lSJmMWkYOzLbhSaHNjnzHWiIsQWFsDbUHqETNhPrtffN96dtxKWfZ6oSutrDXr8IuqhdIapZq3sPCXGbnC2s1z0PRKg9TkTpAkuNAUJXTxpSzKHwW9qkCZA/kT/zOXc8jILSqhFk1EzKZPthbbnImZoEVNg2mL4VM1AqgkgYLY455UI2XF4tfwp3lYpHvS+fksra2vpr2/NYiX2970agfxDvuslJfuTmrM+N/N2G1YJk34aWp1P7w1IaNUymDzKWSdqyhvo+NYt0/LclfMOyo2j4OQ9BAE+oRNOdUSqLq/Ui6BEzSJxOkrxPUbQCcFRAczMNIoq0ZxeiKeV4Uno+Qldwb5G8FttddAeg6d1bL19BNfTOgbVkt62fXB3mIRPO40dA1cnSlRgpNOPPTFfJjoevTt2G+N178Momf6DSSkgU7yMd3ZBSf4dBjIr9ac//YaNiqHIAikQr3cppbKkHU5U6aKmNs36nFKXBgUD0aEMxhscIOJYHc2tt3yHQHvf08ODg9PEWd1jv18PlwsN9BH1rvtpMcGTPuEH6EWvnHK8CIxBHqpI33Ixc7bA40LdQJ79E+fHfhy6djvLW7v7+D2i3104Efs5Ni28xjAN2cu1SSpM0ldOqCB3uH+jmE4xHkl0ZuhfexGMyex+0sGidhCHHY2ka949hx3RrXrOMIZdHaAh2IUFxGQX/H8PEYmbrQPPCIupTaSuZGMjTJUzr5EJphGJQATGyqCzkMYXWy+bT0KeTUx3yR64FlUhUYgGWG1XvjCEkekZymMvgSNvFHqe2mGsxU4DF3Fqb2HYIjU9ywrdr/+dh4hHikGWdy2CARrjxZ5yAEbAcFkefFug6zI9VsTolMJE4XX50tfU+43YiDtpzOXUvfJ3Ytfc/5H9MmLOH/HAAA

This issue is still tracking the import map generation issue, so will leave it open for a little longer still.

guybedford commented 3 years ago

@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.

albertocorrales commented 3 years ago

Hey @guybedford, I've just tested it and it works beautifully.

Thank you so much for your quick response and resolution. Closing this issue.