Works on localhost, but module not found on Vercel

[westis]

edit: managed to find the cause.... for some reason the json files had been ignoreb by git. Now ot works. Sorry....

---

I'm using next-intl 4.0.2. I don't use /src/, but I have all code in root. Therefore I placed the i18n folder with request.ts in root, as well as messages folder with sv.json and en.json. But no matter what I do with paths and configurations, I keep getting the same error when deploying to Vercel: Module not found: Can't resolve '../messages'

I only do scoped localization for a particular app, so the relevant layout.tsx file is in /app/appname/[lang]/layout.tsx, and same with the page.tsx

I have read about others having similar issues, but I haven't been able to apply their fixes to my case.

What can I do about this? My current files are these:

/i18n/request.ts:

import { getRequestConfig } from "next-intl/server";
import { hasLocale } from "next-intl";

// Define supported locales as a const array for better type safety
const supportedLocales = ["sv", "en"] as const;
const defaultLocale = "sv";

export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale;
  // Use the new hasLocale helper to validate the locale
  const locale = hasLocale(supportedLocales, requested)
    ? requested
    : defaultLocale;

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

next.config.mjs:

import createNextIntlPlugin from "next-intl/plugin";

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "cdn.sanity.io" },
      { protocol: "https", hostname: "flagcdn.com" },
      { protocol: "https", hostname: "scontent-arn2-1.xx.fbcdn.net" },
      { protocol: "https", hostname: "*.fbcdn.net" },
    ],
  },
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ["lucide-react", "@radix-ui/react-icons"],
  },
  webpack: (config, { dev, isServer }) => {
    if (dev && !isServer) {
      config.devtool = false;
    }
    return config;
  },
  onDemandEntries: {
    maxInactiveAge: 25 * 1000,
    pagesBufferLength: 2,
  },
  output: "standalone",
  poweredByHeader: false,
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "X-Robots-Tag",
            value: "index, follow",
          },
        ],
      },
    ];
  },
};

const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
export default withNextIntl(nextConfig);

/app/appname/[lang]/layout.tsx:

import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import React from "react";

export default async function Layout(props: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  const { children, params } = props;
  const { lang } = params;
  const messages = await getMessages({ locale: lang });
  return (
    <NextIntlClientProvider messages={messages} locale={lang}>
      {children}
    </NextIntlClientProvider>
  );
}