NoSsr and useAutocomplete undefined when grouping imports

[wunderman4]

mui has bad imports (noSsr and useAutocomplete) causing a typeError when trying to group imports. (using parcel for packaging)

• 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 😯

The noSsr and useAutocomplete components in @mui/core are not importing properly.

Uncaught TypeError: can't access property "default", _noSsrDefault is undefined

in node_modules/@mui/material/index.js comment out the two exports (NoSsr & useAutocomplete) and everything goes back to normal.

import { Button, Grid } from "@mui/material"; // Doesn't work

// This works
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";

Expected Behavior 🤔

Expect to be able to group the imports without breaking the application.

Steps to Reproduce 🕹

Here is a sample project
https://github.com/wunderman4/muiParcelBadImports/tree/main

Steps:

• run yarn
• run yarn start
• see console for error
• open App.js and swap the import syntax
• go back to browser, see working.

Context 🔦

the error is cryptic and cost me some serious debugging time thinking it was a problem with my code.

Your Environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 11.6
  Binaries:
    Node: 16.8.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 94.0.4606.54
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.47 
    @mui/material: ^5.0.0 => 5.0.0 
    @mui/private-theming:  5.0.0 
    @mui/styled-engine:  5.0.0 
    @mui/system:  5.0.0 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.0 
    @types/react:  17.0.24 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

[wunderman4]

@Forchapeatl the documentation allows for either. Neither should break the application. Please see documentation. https://mui.com/api/button/#import

[lucasrdrgs]

I'm having the same issue. Uncaught TypeError: _noSsrDefault is undefined whenever I try to import multiple components with the { } syntax. I'm using Parcel (npm i parcel@next) as my bundler and my package.json is as follows:

{
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.0",
    "@mui/material": "^5.0.0",
    "@mui/styles": "^5.0.0",
    "deepcopy": "^2.1.0",
    "parcel": "^2.0.0-rc.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0"
  },
  "devDependencies": {
    "@parcel/transformer-image": "^2.0.0-rc.0"
  }
}

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[wunderman4]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

In the main description I included a link to a repo that has the problem setup with both working and not working examples. The issue does not occur on codesandbox. What else specifically do you need?

[eps1lon]

Didn't see that, sorry.

Since you're using Parcel, it's only a release candidate and other bundlers work well, I would suggest opening this issue against the Parcel repository and report back if this is actually an issue on our side.

[wunderman4]

Okay then

[wunderman4]

Issue was fixed via parcel, see ticket here parcel-bundler/parcel#7016