Next.js Discord

Discord Forum

Import Alias Issue

Answered
Lord_TCG#9068 posted this in #help-forum
Open in Discord
Lord_TCG#9068OP
Hey Peeps,

I'm testing out import aliases as I've not really used them before. As a test, I setup an import alias for my local fonts: 
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/fonts/*": ["src/fonts/*"]
    }
  }
}
and went to use them in the layout.js 
import localFont from "next/font/local";
import "./globals.css";

const mediaSans = localFont({
  src: [
    {
      path: "@/fonts/mediaSans/mediasans-regular.otf",
    },
    {
      path: "@/fonts/mediaSans/mediasansextended-regular.otf",
    },
    {
      path: "@/fonts/mediaSans/mediasanssemicondensed-regular.otf",
    },
  ],
});

const sfPro = localFont({
  src: [
    {
      path: "@/fonts/sfPro/SF-Pro-Display-Regular.otf",
    },
    {
      path: "@/fonts/sfPro/SF-Pro-Text-Regular.otf",
    },
  ],
});

export const metadata = {
  title: "Page Title Here",
  description: "Page description here",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
but I get errors: 
 ⨯ src\app\layout.js
Module not found: Can't resolve './@/fonts/mediaSans/mediasans-regular.otf'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/font/local/target.css?{"path":"src\\app\\layout.js","import":"","arguments":[{"src":[{"path":"@/fonts/mediaSans/mediasans-regular.otf"},{"path":"@/fonts/mediaSans/mediasansextended-regular.otf"},{"path":"@/fonts/mediaSans/mediasanssemicondensed-regular.otf"}]}],"variableName":"mediaSans"}


Any ideas??
Answered by Ray
I think you need to provide the relative path to localFont
View full answer

2 Replies

@Lord_TCG#9068 Hey Peeps, I'm testing out import aliases as I've not really used them before. As a test, I setup an import alias for my local fonts: json { "compilerOptions": { "baseUrl": ".", "paths": { "@/fonts/*": ["src/fonts/*"] } } } and went to use them in the `layout.js` js import localFont from "next/font/local"; import "./globals.css"; const mediaSans = localFont({ src: [ { path: "@/fonts/mediaSans/mediasans-regular.otf", }, { path: "@/fonts/mediaSans/mediasansextended-regular.otf", }, { path: "@/fonts/mediaSans/mediasanssemicondensed-regular.otf", }, ], }); const sfPro = localFont({ src: [ { path: "@/fonts/sfPro/SF-Pro-Display-Regular.otf", }, { path: "@/fonts/sfPro/SF-Pro-Text-Regular.otf", }, ], }); export const metadata = { title: "Page Title Here", description: "Page description here", }; export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ); } but I get errors: ⨯ src\app\layout.js Module not found: Can't resolve './@/fonts/mediaSans/mediasans-regular.otf' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./node_modules/next/font/local/target.css?{"path":"src\\app\\layout.js","import":"","arguments":[{"src":[{"path":"@/fonts/mediaSans/mediasans-regular.otf"},{"path":"@/fonts/mediaSans/mediasansextended-regular.otf"},{"path":"@/fonts/mediaSans/mediasanssemicondensed-regular.otf"}]}],"variableName":"mediaSans"} Any ideas??
Ray
I think you need to provide the relative path to localFont
Answer
Ray