Import Two JS Files Same Name

Question

I found myself in an unfortunate situation. I am using material-ui with nextjs and they both have a module called Link which I need to use.

import {  Link } from '@material-ui/core';
import Link from 'next/link';

And this is messing up my compilation as I need to use <Link> in my jsx for both the material and next module anyway around this?

Thank You

Answer 1

You can rename it with more convenient one:

import { Link as _link } from '@material-ui/core';

import Link from 'next/link';

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#rename_multiple_exports_during_import

A similar answer also given here