Global Variants not applying - names are auto-capitalized

Issues
1

If you’re using Plasmic global variants with PlasmicRootProvider and they aren’t applying even though you’re passing the correct value, the issue might be the
variant name casing.

The problem: Plasmic automatically capitalizes global variant group names. So even if you create a variant group called myVariant (camelCase) or locale
(lowercase), Plasmic stores it as MyVariant / Locale (capitalized).

The fix: Make sure the name in globalVariants uses the capitalized version:

// Won't work
globalVariants={[{ name: "locale", value: locale }]}

// Works
globalVariants={[{ name: "Locale", value: locale }]}

Full example with Next.js Pages Router and a locale variant:

export default function PlasmicLoaderPage(props) {
  const { query, locale } = useRouter();
  // ...
  return (
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      globalVariants={[{ name: "Locale", value: locale }]}
    >
      <PlasmicComponent component={pageMeta.displayName} />
    </PlasmicRootProvider>
  );
}

Feature request: Could the globalVariants name matching be made case-insensitive?

Hope this saves someone some debugging time!

1 Like
2

Hello @wytze_sligting Thanks for flagging this. I agree that this is confusing and results in a poor user experience. I will raise it with the team and consider it in our prioritization.

1 Like