Merge pull request #25061 from kkirby/fix-next-font-local

Next.js: Update validateData function for next/font compatibility
storybookjs · Dec 1, 2023 · c3fa95b · c3fa95b
2 parents 0012b9b + 6951f27
commit c3fa95b
Showing 1 changed file with 47 additions and 22 deletions.
diff --git a/code/frameworks/nextjs/src/font/webpack/loader/utils/local-font-utils.ts b/code/frameworks/nextjs/src/font/webpack/loader/utils/local-font-utils.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-mutable-exports */
 import dedent from 'ts-dedent';
 
 type FontOptions = {
@@ -22,30 +21,56 @@ type FontOptions = {
   }>;
 };
 
-let validateData: (functionName: string, fontData: any) => FontOptions;
+const trials = [
+  {
+    module: '@next/font/dist/local/utils',
+    exportName: 'validateData',
+    description: 'Support @next/font prior to v13.2.5',
+  },
+  {
+    module: '@next/font/dist/local/validate-local-font-function-call',
+    exportName: 'validateLocalFontFunctionCall',
+    description: 'Support @next/font since v13.2.5',
+  },
+  {
+    module: 'next/dist/compiled/@next/font/dist/local/utils',
+    exportName: 'validateData',
+    description: 'Support next/font prior to v13.2.4',
+  },
+  {
+    module: 'next/dist/compiled/@next/font/dist/local/validate-local-font-function-call',
+    exportName: 'validateLocalFontFunctionCall',
+    description: 'Support next/font since v13.2.4',
+  },
+];
 
-// Support @next/font
-try {
-  const fontUtils = require('@next/font/dist/local/utils');
-  validateData = fontUtils.validateData;
-} catch (_) {
-  // Support next/font prior to v13.2.4
-  try {
-    const fontUtils = require('next/dist/compiled/@next/font/dist/local/utils');
-    validateData = fontUtils.validateData;
-  } catch (__) {
-    // Support next/font since v13.2.4
+const validateData: (functionName: string, fontData: any) => FontOptions = (() => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const { module, exportName } of trials) {
     try {
-      validateData =
-        require('next/dist/compiled/@next/font/dist/local/validate-local-font-function-call').validateLocalFontFunctionCall;
-    } catch (e) {
-      throw new Error(dedent`
-        We are unable to load the helper functions to use next/font/local.
-        Please downgrade Next.js to version 13.2.4 to continue to use next/font/local in Storybook.
-        Feel free to open a Github Issue!
-      `);
+      const loadedModule = require(module);
+      if (exportName in loadedModule) {
+        return loadedModule[exportName];
+      }
+    } catch {
+      // Continue to the next trial
     }
   }
-}
+
+  // Generate the dynamic error message
+  const errorDetails = trials
+    .map(
+      (trial) =>
+        `- ${trial.description}: tries to import '${trial.exportName}' from '${trial.module}'`
+    )
+    .join('\n');
+
+  throw new Error(dedent`
+    We were unable to load the helper functions to use next/font/local. The code attempted the following scenarios:
+    ${errorDetails}
+      
+    Please check your Next.js version and the module paths. If you resolve this issue for a version or setup not covered, consider contributing by updating the 'trials' array and making a pull request.
+  `);
+})();
 
 export { validateData };