Module not found: Can't resolve '@mui/icons-material'

[medhatdawoud]

material-react-table version

1.0.7

Describe the bug and the steps to reproduce it

Just installed it and copied the example provided in the home page and got that error, not sure if it can be removed completely or be added to the dependency list

Your Minimal, Reproducible Example - Sandbox (Recommended) or code snippets

No code required, I was able to fix this by installed @mui/icons-material separately, I'm using react-icons as a main icons lib instead but was forced to download the icons material in order to make the table work

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

Follow the full install instructions and you should be good https://www.material-react-table.com/docs/getting-started/install#install-with-required-peer-dependencies-(recommended)

If you are replacing all icons with your custom ones, I think they should get code splitted out

[KevinVandy]

Actually after some testing, it looks like they don't get code splitted out. This could probably be improved.

[BennyAlex]

@KevinVandy
Hello,
I also get this error, i only use the tabbler icons.

Can you maybe fix this error?
Thanks in advance :D

[KevinVandy]

@KevinVandy
Hello,
I also get this error, i only use the tabbler icons.

Can you maybe fix this error?
Thanks in advance :D

Even if you use other icons, you still have to install all of the peer dependencies

[BennyAlex]

Yeah but the icons could be defined as optional peer dep

[KevinVandy]

Yeah but the icons could be defined as optional peer dep

How would the imports work internally? I didn't know this was possible.

[BennyAlex]

https://stackoverflow.com/questions/62047806/how-do-i-set-a-peer-dependency-optional

Maybe you can import icons dynamcially with import() only if its not set by the icons property?

[KevinVandy]

@BennyAlex I've known that can be done in a normal app using webpack, but didn't know about rollup. Guess I'll try. Feel free to make a PR yourself too though if you want credit or know exactly what needs to be done

[KevinVandy]

@BennyAlex I tried for 30 minutes and came up with this for icons.ts, but still get errors. I'll see if anyone can build on this.

export interface MRT_Icons {
  ArrowDownwardIcon: any;
  ArrowRightIcon: any;
  CancelIcon: any;
  ClearAllIcon: any;
  CloseIcon: any;
  DensityLargeIcon: any;
  DensityMediumIcon: any;
  DensitySmallIcon: any;
  KeyboardDoubleArrowDownIcon: any;
  DragHandleIcon: any;
  DynamicFeedIcon: any;
  EditIcon: any;
  ExpandMoreIcon: any;
  FilterAltIcon: any;
  FilterListIcon: any;
  FilterListOffIcon: any;
  FullscreenExitIcon: any;
  FullscreenIcon: any;
  MoreHorizIcon: any;
  MoreVertIcon: any;
  PushPinIcon: any;
  RestartAltIcon: any;
  SaveIcon: any;
  SearchIcon: any;
  SearchOffIcon: any;
  SortIcon: any;
  ViewColumnIcon: any;
  VisibilityOffIcon: any;
}

export async function loadIcons() {
  try {
    const [
      ArrowDownwardIcon,
      ArrowRightIcon,
      CancelIcon,
      ClearAllIcon,
      CloseIcon,
      DensityLargeIcon,
      DensityMediumIcon,
      DensitySmallIcon,
      DragHandleIcon,
      DynamicFeedIcon,
      EditIcon,
      ExpandMoreIcon,
      FilterAltIcon,
      FilterListIcon,
      FilterListOffIcon,
      FullscreenExitIcon,
      FullscreenIcon,
      KeyboardDoubleArrowDownIcon,
      MoreHorizIcon,
      MoreVertIcon,
      PushPinIcon,
      RestartAltIcon,
      SaveIcon,
      SearchIcon,
      SearchOffIcon,
      SortIcon,
      ViewColumnIcon,
      VisibilityOffIcon,
    ] = await Promise.all([
      import('@mui/icons-material/ArrowDownward')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/ArrowRight')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Cancel')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/ClearAll')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Close')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/DensityLarge')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/DensityMedium')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/DensitySmall')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/DragHandle')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/DynamicFeed')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Edit')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/ExpandMore')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/FilterAlt')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/FilterList')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/FilterListOff')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/FullscreenExit')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Fullscreen')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/KeyboardDoubleArrowDown')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/MoreHoriz')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/MoreVert')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/PushPin')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/RestartAlt')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Save')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Search')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/SearchOff')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/Sort')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/ViewColumn')
        .then((module) => module.default)
        .catch(() => null),
      import('@mui/icons-material/VisibilityOff')
        .then((module) => module.default)
        .catch(() => null),
    ]);

    return {
      ArrowDownwardIcon,
      ArrowRightIcon,
      CancelIcon,
      ClearAllIcon,
      CloseIcon,
      DensityLargeIcon,
      DensityMediumIcon,
      DensitySmallIcon,
      DragHandleIcon,
      DynamicFeedIcon,
      EditIcon,
      ExpandMoreIcon,
      FilterAltIcon,
      FilterListIcon,
      FilterListOffIcon,
      FullscreenExitIcon,
      FullscreenIcon,
      KeyboardDoubleArrowDownIcon,
      MoreHorizIcon,
      MoreVertIcon,
      PushPinIcon,
      RestartAltIcon,
      SaveIcon,
      SearchIcon,
      SearchOffIcon,
      SortIcon,
      ViewColumnIcon,
      VisibilityOffIcon,
    };
  } catch (error) {
    return undefined;
  }
}

[KevinVandy]

Actually, combining it with this makes it actually work, but with the caveat that the table now renders with a stutter at first as the icons get imported at runtime instead of compile time

const [defaultIcons, setDefaultIcons] = useState<MRT_Icons>();
  useEffect(() => {
    const _loadIcons = async () => {
      const icons = await loadIcons();
      setDefaultIcons(icons);
    };
    _loadIcons();
  }, []);
  const _icons = useMemo(() => ({ ...defaultIcons, ...icons }), [defaultIcons, icons]);

This has been fun, and maybe I'll publish an experimental alpha for you to try @BennyAlex . I'm not sure if I should ship it though

[BennyAlex]

Nice work.
Is the table currently that fast, that you dont have to show a loading indicator at first render (when working with large datasets)?