Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`import * as PropTypes` fails with ES modules in browser

See original GitHub issue

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:

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

Issue Analytics

State:
Created 2 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

eps1loncommented, Jun 3, 2021

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.

0reactions

oliviertassinaricommented, Jun 13, 2021

Closing per https://github.com/mui-org/material-ui/issues/26564#issuecomment-853340337, 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.