Next.js Discord

Discord Forum

Error in production

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
I get this error only in production:
https://sourceb.in/IVuWxa6lQx

here are the places that I am using .toLowerCase()

Use case A:
const fonts = [
      {
        name: "Inter",
        value: inter.className,
        font: inter,
      },
      {
        name: "Roboto",
        value: roboto.className,
        font: roboto,
      },
      {
        name: "DM_Sans",
        value: dm_sans.className,
        font: dm_sans,
      },
      {
        name: "Poppins",
        value: poppins.className,
        font: poppins,
      },
      {
        name: "Luxurious_Roman",
        value: luxurious_roman.className,
        font: luxurious_roman,
      },
    ];

    const font = fonts.find(
      (font) => font.name.toLowerCase() === fontToFind.toLowerCase()
    );


Use case B:
// icons data is being imported from a diff file
  const social = ICONS_DATA.find(
    (icon) => icon.name.toLowerCase() === $social.platform.toLowerCase()
  )!;


Use Case C:
{themes_data.map((theme, i) => (
          <Theme
            theme={theme}
            onClick={handleThemeChange}
            isSelected={
              selectedTheme.toLowerCase() === theme.name.toLowerCase()
            }
            key={i}
          />
        ))}

2 Replies

Sun bear
oh this has also happened to me. It is because some values that typescript thinks are a string could be undefined during build time. Since .toLowerCase() is a method of a string class if that string is undefined during build time you will try to run .toLowerCase() on undefined class which does not have that method.

The easiest way to fix this would be to change convert every value to String(value) before calling toLowerCase():

const helloWorld = getHelloWorld() // string but could be undefiend during build time

return helloWorld.toLowerCase()


// just make sure that helloWorld is always String before calling toLowerCase() or any other string exlusive method

const helloWorld = String(getHelloWorld()) // this ensures that helloWorld is really a string before calling toLowerCase()

return helloWorld.toLowerCase()


or 

cosnt helloWorld = getHelloWorld()


return String(helloWorld).toLowerCase()