import * as PropTypes fails with ES modules in browser

[jollytoad]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When loading some components directly into the browser as ES modules from a CDN, eg: https://ga.jspm.io/npm:@material-ui/lab@4.0.0-alpha.58/esm/TabContext/TabContext.js

I see the following error:

Uncaught TypeError: Cannot read property 'isRequired' of undefined at TabContext.js:52

I believe this is due to PropTypes being imported as:

import * as PropTypes from 'prop-types'

as opposed to:

import PropTypes from 'prop-types'

This may affect other components too, eg. TabList ... i've not searched for other occurrences.

Expected Behavior 🤔

No error, like all other components that import PropTypes correctly.

Steps to Reproduce 🕹

Steps:

1. Visit: https://jspm.org/sandbox#H4sIAAAAAAAAA4VUW1PiMBR+51ccuy+6Sy+464AIDKKMN8rgIu7sY0gPNNommSSI4PjfN20BhXXdGUonObfvfD3faexFgpqFRIhNmrRKjfULSdQqATRSNARoTJRG03RmZuLWnNxgmEmwNeL5O2r4xXkTwkmKTeeJ4VwKZRygghvkNsWcRSZuRvjEKLr5oQyMM8NI4mpKEmxWbIGGXyBojEW0yLLavJoqJk1LKkFR6+YL8qf6y+trw18ZSlnxPdeF7hBCEc0ShGHMUl2HqzQDASmRGqRIFhOWJDARCtLcTcNYiblGpWHOTCxmBti7CD2T+WGf2Ch8pigNnMVKpAi1428H4Lp52wUKIHrBKWhFm05sjNR1358S70HL1GPC5zKto3aLuq7O4LUDr2J/fsS08XdsXsq4jXVab00CrNrMSbkeDkK4QI6KGNvPqtGQyNzajZiB0c9eHTZQ1q4bRF9Gh/3p74vO43kYqMVweT0cVWIaxv1e99EsHpdhMPzer4TH13eXV/PgbnAbHnf6yzN+NezfLk3UGfRo9f48SEKqq4ObIDU3p93Te17rXC6DU4tim51s1JpOwa4lNx+llxzr6lI79dWFvWqnxKDKJmPG/ISMLT2pf0fGZ9kwPRvr+i+OdyPbP7zAC1ySyJh4R7WdRD7jET5nROeVX8sFIk2FxC1AH1R7Z7YOYvyA1LhEazbln+Db8rPgKnYANiDKb/nssEs3I01/kuzNqV058qre4YepFBL6GWW5vV2pWqIOdwixlJTW/9mzO41bH7eYX6cQ7UpHX60sYMR6ZNzV6RvvMLEq+v9nPinKAPg+/FLMoNUl4yvx2s0S2e2FCstgFWDrENAoiZ1yBCt0zDVtLx2rSQeIMYqNZ9YmOJgY11mKFry8jN1VWiToJWK6/zfog5MtBhp+saLsxspX5x+cg1v0UgUAAA==

2. Open the browser dev console

3. See the error

Context 🔦

I'm trying to use Material UI as ES modules directly in the browser, using JSPM CDN and an import-map.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.1
  Binaries:
    Node: 14.16.0 - ~/.nodenv/versions/14.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nodenv/versions/14.16.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.77 (using this browser)
    Edge: Not Found
    Firefox: 88.0.1
    Safari: 14.0.2
  npmPackages:
    @emotion/styled:  10.0.27 
    @material-ui/core:  4.11.4 
    @material-ui/icons:  4.11.2 
    @material-ui/lab:  4.0.0-alpha.58 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: 17.0.5 => 17.0.5 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.2.4 => 4.2.4 

[eps1lon]

Thanks for the report.

I believe this is due to PropTypes being imported as:

import * as PropTypes from 'prop-types'

Neither TabContext nor any imported modules use this pattern. Only Paper uses import * as PropTypes

I don't how the jspm playground works. Could you create a repro that only uses Paper and check if this problem still persist?

[jollytoad]

Ok, my PR clarifies that some modules do use that pattern in v4 at least, although I see this has been dealt with in v5. Unfortunately this is a real blocker for our new build until v5 is released. I'll look for a work-around. Thanks for your quick reply. Keep up the great work on MUI, looking forward to the new release.

[oliviertassinari]

@jollytoad Could you update the reproduction to target v5? We don't actively work on v4 since April 2020.

[eps1lon]

I would also like to understand why this fails only in jspm on not vite, snowpack, esbuild, or webpack 5. Would be nice to give libraries some actionable advise to ensure compatibility and not constantly new issues for different bundlers. I don't understand how the ES module working group is ok with the current state of affairs for libraries.

[jollytoad]

I can't update for v5 atm, as it's broken on JSPM atm, i think because there are no exports in the MUI package.json files, and there are no explicit overrides for v5 in https://github.com/jspm/overrides/blob/main/overrides.json

Maybe @guybedford can elaborate on @eps1lon's question better than I could?

[eps1lon]

Tried to make it work but the JSPM CDN is just incomplete. Either latest versions don't exist, or entrypoints are missing. Started to report those in jspm/project#107 but the amount of missing files lead me to believe there's some fundamental part I'm missing about this CDN. Once these issues are resolved we can think about working on compatibility from our side.

[oliviertassinari]

Closing per #26564 (comment), the reproduction is on v4.
Also, we did a follow-up to remove the last few import * as PropTypes from 'prop-types' left in the codebase in #26628.