Using all the Steps in the Docs yet I still see the same error "Error: Couldn't find next-intl config file. Please follow the instructions" #639

EfstathiadisD · 2023-11-16T20:28:38Z

Description

I am using the latest release of next-intl. I was previously using 2.x and was working fine. I did all the Steps described in this page as the error message suggests.

Here are the files I have:

import createI18nMiddleware from "next-intl/middleware";

export default createI18nMiddleware({
	locales: ["en", "el", "de"],
	defaultLocale: "en",
});

export const config = {
	matcher: ["/", "/((?!api|_next|.*\\..*).*)"],
};

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

export default getRequestConfig(async ({ locale }) => ({
	messages: (await import(`../locales/${locale}.json`)).default,
}));

const { withSentryConfig } = require("@sentry/nextjs");
const withNextIntl = require('next-intl/plugin')();
const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
	pageExtensions: ["ts", "tsx"],
	compiler: {
		emotion: true,
	},
	experimental: {
		esmExternals: true,
		externalDir: true,
	},
	sentry: {
		disableServerWebpackPlugin: true,
		disableClientWebpackPlugin: true,
	},
	transpilePackages: [
		"@***/components/*",
		"@***/constants/*",
		"@***/cookies/*",
		"@***/theme/*",
		"@***/utils/*",
	],
};

module.exports = withSentryConfig(withNextIntl(nextConfig), {
	org: "****",
	project: "***",
	authToken: process.env.SENTRY_AUTH_TOKEN,

	disableLogger: true,
	hideSourceMaps: true,
	transpileClientSDK: true,
});

import { redirect } from "next/navigation";

export default function RootPage() {
	redirect("/en");
}

import "./globals.css";

import type { PropsWithChildren } from "react";

type RootLayoutProps = PropsWithChildren<Record<string, never>>;

function RootLayout({ children }: RootLayoutProps) {
	return children;
}

export default RootLayout;

import type { PropsWithChildren } from "react";

import { Inter } from "next/font/google";
import { notFound } from "next/navigation";

import { NextIntlClientProvider } from "next-intl";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";

import { ThemeProvider } from "@midgard/components/ThemeProvider/ThemeProvider";

import { getMessages } from "../../clients/i18n";
import { ApolloProvider } from "../../components/ApolloProvider";

const ALL_LOCALES = ["en", "el", "de"];
const inter = Inter({ subsets: ["latin", "greek"], display: "swap" });

type LocaleLayoutProps = PropsWithChildren<{
	params: { locale: string };
}>;

export function generateStaticParams() {
	return ALL_LOCALES.map((locale) => ({ locale }));
}

export async function generateMetadata({ params }: LocaleLayoutProps) {
	const t = await getTranslations({ locale: params.locale });

	return {
		title: t("LOCALE.METADATA.TITLE"),
		description: t("LOCALE.METADATA.DESCRIPTION"),
	};
}

async function LocaleLayout({ children, params }: LocaleLayoutProps) {
	if (!ALL_LOCALES.includes(params.locale)) {
		return notFound();
	}

	const messages = await getMessages(params.locale);

	unstable_setRequestLocale(params.locale);

	return (
		<html suppressHydrationWarning={true} lang={params.locale}>
			<head>
				<meta
					name="format-detection"
					content="telephone=no, date=no, email=no, address=no"
				/>
				<meta name="color-scheme" content="light dark" />
			</head>
			<body suppressHydrationWarning className={inter.className}>
				<ApolloProvider>
					<NextIntlClientProvider messages={messages}>
						<ThemeProvider>{children}</ThemeProvider>
					</NextIntlClientProvider>
				</ApolloProvider>
			</body>
		</html>
	);
}

export default LocaleLayout;

And it should theoretically work. I deleted node_modules, disabled other middleware removed Sentry in case it conflicted somewhere, yet nothing.

The issue seems to be with the matcher. With the one you are providing all my routes are 404, and with the one that matches mine, throw the above error.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

Reproduction description

Steps to reproduce:

Open reproduction
See error: …

The error stems from the path matcher. In real project, we might have more complicated stuff. What should we use then? Is it a bug in next-intl?

Expected behaviour

When I use a matcher, it should match the routes we have in our applications and not show 404, and should be able to use next-intl as well.

The text was updated successfully, but these errors were encountered:

amannn · 2023-11-17T09:05:19Z

I think your matcher is off and doesn't match /en.

The matcher that the docs suggest for localePrefix: 'as-needed' works for me in your CodeSandbox (fixed version). If you need something more specialized, make sure that it matches all relevant pathnames in your app.

Hope this helps!

amannn · 2023-11-23T11:09:52Z

Closing this due to inactivity.

EfstathiadisD · 2023-11-25T21:29:51Z

Sorry for this, but I tried a brand new repo. Copying one to one from the examples file on you repo. It just doesn't work. I am not sure what the problem is. It just doesn't work. The code is the same, I even copied the pathnames strategy to be sure.

What am I doing wrong? The error keeps saying it cannot find the next-intl config. Where is that config? The main diff with the examples I see, is I need the NextIntlClientProvider. The examples don't use it. So, they don't pass it the messages. Any help would be appreciated. I can even invite you for a bit on the private repo.

Or even a simple example that has the NextIntlClientProvider and something close to my setup would be great. Thank you in advance..

EfstathiadisD · 2023-11-30T19:09:52Z

Here is an example. It is 1-2-1 what you have in the examples. Can you take a look please? I am sure it should be working. What am I doing wrong?

CrazyOrr · 2024-01-10T03:39:39Z

Change your next.config.cjs to next.config.js should fix it. Took me a long time to figure this out too.

lhguerra · 2024-01-22T21:31:21Z

I'm not using cjs but still get the same issue. The docs are very confusing, the client way of setting up aks for no next.config alterations and also no special config files are needed. But it is impossible to make it work without it.

EfstathiadisD added bug Something isn't working unconfirmed Needs triage. labels Nov 16, 2023

amannn closed this as completed Nov 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using all the Steps in the Docs yet I still see the same error "Error: Couldn't find next-intl config file. Please follow the instructions" #639

Using all the Steps in the Docs yet I still see the same error "Error: Couldn't find next-intl config file. Please follow the instructions" #639

EfstathiadisD commented Nov 16, 2023

amannn commented Nov 17, 2023

amannn commented Nov 23, 2023

EfstathiadisD commented Nov 25, 2023

EfstathiadisD commented Nov 30, 2023 •

edited

Loading

CrazyOrr commented Jan 10, 2024

lhguerra commented Jan 22, 2024 •

edited

Loading

Using all the Steps in the Docs yet I still see the same error "Error: Couldn't find next-intl config file. Please follow the instructions" #639

Using all the Steps in the Docs yet I still see the same error "Error: Couldn't find next-intl config file. Please follow the instructions" #639

Comments

EfstathiadisD commented Nov 16, 2023

Description

Mandatory reproduction URL (CodeSandbox or GitHub repository)

Reproduction description

Expected behaviour

amannn commented Nov 17, 2023

amannn commented Nov 23, 2023

EfstathiadisD commented Nov 25, 2023

EfstathiadisD commented Nov 30, 2023 • edited Loading

CrazyOrr commented Jan 10, 2024

lhguerra commented Jan 22, 2024 • edited Loading

EfstathiadisD commented Nov 30, 2023 •

edited

Loading

lhguerra commented Jan 22, 2024 •

edited

Loading