nextjs - 💡(How to fix) Fix Production Fonts are still trying to be loaded in Development even though code is never hit [1 comments, 2 participants]

Module not found: Can't resolve './fonts/TTNormsPro/TT_Norms_Pro_Light.woff2'

TL;DR

• Consider using a dynamic import with a conditional statement to load the proprietary font only when the environment variable is set.

Guidance

• Review the computeFont function to ensure it's correctly handling the conditional loading of the font based on the process.env.PROPRIETARY_FONT variable.
• Verify that the process.env.PROPRIETARY_FONT variable is not set in the local development environment to prevent the font from being loaded.
• Check if there are any other places in the code where the proprietary font is being imported or loaded without a conditional statement.
• Consider using a try-catch block to handle the error when the font is not found, to prevent the build from failing.

Example

const computeFont = async () => {
  if (process.env.PROPRIETARY_FONT === "TTNormsPro") {
    try {
      const { ttNormsPro } = await import("@/styles/fonts");
      return ttNormsPro;
    } catch (error) {
      console.error("Error loading proprietary font:", error);
      return devFont;
    }
  }

  return devFont;
};

Notes

• The issue seems to be related to the way Next.js handles font loading, and the error message suggests that the font is being loaded even when the conditional statement is not met.
• The provided code snippet and environment information suggest that the issue is specific to the local development environment and the next dev and next build stages.

Recommendation

• Apply workaround: Use a dynamic import with a conditional statement to load the proprietary font only when the environment variable is set, and handle the error when the font is not found.