From 11a6ad042bdc02391910ccb687879d7d45cdecc6 Mon Sep 17 00:00:00 2001 From: Kyle Kirbatski Date: Thu, 30 Nov 2023 09:27:40 -0600 Subject: [PATCH 1/2] refactor: Update validateData function for next/font compatibility Refactored the method of deriving the correct validateData function to improve handling of different Next.js version compatibilities. Replaced multiple try-catch blocks with a trials array containing objects with module, export, and description properties. This array is used to dynamically attempt loading the required functions and generate a detailed error message if all attempts fail. This approach simplifies future updates for new Next.js versions and makes the error message more informative for users. --- .../webpack/loader/utils/local-font-utils.ts | 64 +++++++++++++------ 1 file changed, 43 insertions(+), 21 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 index a7d91f71c73b..7230c8f1f0c3 100644 --- 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 @@ -22,30 +22,52 @@ 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 = (() => { + for (let { 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.export}' 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 }; From 3ca286ef4546730e12759079c2f383f6a180405e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 1 Dec 2023 14:18:00 +0100 Subject: [PATCH 2/2] Linting and small bug fixes --- .../webpack/loader/utils/local-font-utils.ts | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 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 index 7230c8f1f0c3..d532f8dcc794 100644 --- 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 = { @@ -26,30 +25,31 @@ const trials = [ { module: '@next/font/dist/local/utils', exportName: 'validateData', - description: 'Support @next/font prior to v13.2.5' + 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' + 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' + 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' - } + description: 'Support next/font since v13.2.4', + }, ]; const validateData: (functionName: string, fontData: any) => FontOptions = (() => { - for (let { module, exportName } of trials) { + // eslint-disable-next-line no-restricted-syntax + for (const { module, exportName } of trials) { try { const loadedModule = require(module); - if(exportName in loadedModule){ + if (exportName in loadedModule) { return loadedModule[exportName]; } } catch { @@ -58,9 +58,12 @@ const validateData: (functionName: string, fontData: any) => FontOptions = (() = } // Generate the dynamic error message - const errorDetails = trials.map((trial) => - `- ${trial.description}: tries to import '${trial.export}' from '${trial.module}'` - ).join('\n'); + 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: