Material-ui and Typescript error when bundling

[qramilq]

Steps to reproduce:

1. npx create-react-library
2. yarn add @material-ui/core
3. create src/TextField folder with index.tsx file, which has this code:

import React from "react";
import TextField from "@material-ui/core/TextField";

const TextFieldComponent = (props: any) => {
  return <TextField {...props} />;
};

export default TextFieldComponent;

4. yarn start

Expected behavior

no errors

Actual behavior

rollup v0.62.0
bundles src/index.tsx → dist\index.js, dist\index.es.js...
[!] Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules@material-ui\utils\esm\getDisplayName.js (2:9)
1: import _typeof from "@babel/runtime/helpers/typeof";
2: import { ForwardRef } from 'react-is'; // Simplified polyfill for IE 11 support

[dash00]

For those who would have the same issue, this post helped me a lot : styled-components/styled-components#1654 (comment)

[JFernandoGomez]

I have this issue, and the linked issue doesn't have a solution

[dherault]

The linked issue resolved mine with an additional step:
rm -rf node_modules package-lock.json

in rollup.config.js:

const commonjsOptions = {
  include: 'node_modules/**',
  // left-hand side can be an absolute path, a path
  // relative to the current directory, or the name
  // of a module in node_modules
  namedExports: {
    'node_modules/react/index.js': [
      'cloneElement',
      'createContext',
      'Component',
      'createElement',
    ],
    'node_modules/react-dom/index.js': ['render', 'hydrate'],
    'node_modules/react-is/index.js': [
      'isElement',
      'isValidElementType',
      'ForwardRef',
      'Memo',
    ],
  },
}

and then, every time you have a commonjs call, you replace it with commonjs(commonjsOptions)

[kressaty]

I ended up adding --external=react,react-dom,react-is to my microbundle-crl command in package.json scripts and that seems to have solved it

[angelogiuseppe]

For me it seems that an specific import path of the styled component from Material UI causes issues whenever is imported on one path rather than the other:

Bad one that causes errors:

import { styled } from '@material-ui/styles';

Good one that causes no errors

import { styled } from '@material-ui/core';

The two paths have a component with the same name, but one causes errors on build and the other does not. Probably if you @qramilq have a place where a component or you are using styled from material styles that can be the issue.

Here you can also see in which places the function and imports that cause the issues are being used: https://github.com/mui-org/material-ui/search?q=getDisplayName

[pinikeizman]

I experienced this issue when I mistakenly import Box component from @mui/system instead of @mui/material for example:

import { Typography } from "@mui/material"
import { Box } from "@mui/system"
import React from "react"

export const MyBox = ()=><Box><Typography>I am a box.</Typography></Box>

When run microbundle-crl Im getting this error:

yarn build
yarn run v1.22.10
$ microbundle-crl --no-compress --format modern,cjs --jsxFragment React.Fragment
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
^[[C'@example/types' is imported by src/types/types.ts, but could not be resolved – treating it as an external dependency
Error: 'ForwardRef' is not exported by node_modules/@mui/utils/node_modules/react-is/index.js, imported by node_modules/@mui/utils/esm/getDisplayName.js

at /Users/cyborg/Documents/workspace/example/node_modules/@mui/utils/esm/getDisplayName.js:1:9

1: import { ForwardRef, Memo } from 'react-is'; // Simplified polyfill for IE11 support
            ^
2: // https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Changing Box import statement to import { Box, Typography } from "@mui/material" fixes the issue.