Merge pull request #25045 from storybookjs/valentin/nextjs-fix-local-…

…font-issue Next.js: Fix next/font/local usage in babel mode
storybookjs · Nov 29, 2023 · aebcbee · aebcbee
2 parents dbc4f02 + cc9ccee
commit aebcbee
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
@@ -8,13 +8,17 @@ import type { LoaderOptions } from '../types';
 
 type LocalFontSrc = string | Array<{ path: string; weight?: string; style?: string }>;
 
-export async function getFontFaceDeclarations(options: LoaderOptions, rootContext: string) {
+export async function getFontFaceDeclarations(
+  options: LoaderOptions,
+  rootContext: string,
+  swcMode: boolean
+) {
   const localFontSrc = options.props.src as LocalFontSrc;
 
   // Parent folder relative to the root context
-  const parentFolder = path
-    .dirname(path.join(getProjectRoot(), options.filename))
-    .replace(rootContext, '');
+  const parentFolder = swcMode
+    ? path.dirname(path.join(getProjectRoot(), options.filename)).replace(rootContext, '')
+    : path.dirname(options.filename).replace(rootContext, '');
 
   const { validateData } = require('../utils/local-font-utils');
   const { weight, style, variable } = validateData('', options.props);

diff --git a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts
@@ -15,6 +15,7 @@ type FontFaceDeclaration = {
 
 export default async function storybookNextjsFontLoader(this: any) {
   const loaderOptions = this.getOptions() as LoaderOptions;
+  let swcMode = false;
   let options;
 
   if (Object.keys(loaderOptions).length > 0) {
@@ -23,6 +24,7 @@ export default async function storybookNextjsFontLoader(this: any) {
   } else {
     // handles SWC mode
     const importQuery = JSON.parse(this.resourceQuery.slice(1));
+    swcMode = true;
 
     options = {
       filename: importQuery.path,
@@ -42,7 +44,7 @@ export default async function storybookNextjsFontLoader(this: any) {
   }
 
   if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) {
-    fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx);
+    fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx, swcMode);
   }
 
   if (typeof fontFaceDeclaration !== 'undefined') {