Skip to content

import * as PropTypes fails with ES modules in browser #26564

Description

@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/[email protected]/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 

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions