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

[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

[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;
  }
}

[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)?