Хешировать имена классов nextJS v14

Как хешировать имена классов CSS для nextJS v14?

Старый способ, которым вы это делали, был примерно таким:

const path = require("path");
const loaderUtils = require("loader-utils");

const hashOnlyIdent = (context, _, exportName) =>
  loaderUtils
    .getHashDigest(
      Buffer.from(
        `filePath:${path
          .relative(context.rootContext, context.resourcePath)
          .replace(/\\+/g, "/")}#className:${exportName}`
      ),
      "md4",
      "base64",
      6
    )
    .replace(/[^a-zA-Z0-9-_]/g, "_")
    .replace(/^(-?\d|--)/, "_$1");

module.exports = {
  experimental: { appDir: true },
  webpack(config, { dev }) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === "object")
      .oneOf.filter((rule) => Array.isArray(rule.use));
    if (!dev)
      rules.forEach((rule) => {
        rule.use.forEach((moduleLoader) => {
          if (
            moduleLoader.loader?.includes("css-loader") &&
            !moduleLoader.loader?.includes("postcss-loader")
          )
            moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;
        });
      });

    return config;
  },
};

Но в настоящее время это дает некоторые ошибки. Нравится: getLocalIdent is not found.

Вы можете напрямую использовать className = {styles.flag} внутри вашего файла JSX, но это не хэширует его с коротким кодом в производстве (например, vercel).

Поэтому я хочу, чтобы мои имена классов CSS выглядели так: 9pt5S вместо текущего navbar_flag__9pt5S (с помощью: className = {styles.flag}).