NextConfig is not correctly implemented

[sovetski]

I wanted to create an issue but the Mandatory reproduction URL is really a nightmare especially when we can not reproduce an entire private project code publicly but anyway

I wanted to be sure if all configs from NextConfig are correctly used?

I am using the latest version of this library and nextjs, before using this library everything was working as well, but as next-intl wraps the default nextjs config, it creates also some conflicts

In my next.config.ts I have:

	sassOptions: {
		implementation: "sass-embedded",
		additionalData: `@use "${path.join(process.cwd(), "_mantine").replace(/\\/g, "/")}" as mantine;`,
	},

I repeat it works as expected without next-intl, but when it is wrapped by withNextIntl then I get: There is no module with the namespace "mantine"

That is not related to Mantine it self but if you want to know more about this: https://mantine.dev/styles/sass/

[sovetski]

In addition to my original question, there is also another problem related to other packages like: next-image-export-optimizer

It gives:

Changed in 1.2.0: You have not set transpilePackages: ["next-image-export-optimizer"] in your next.config.[js/ts]. This may cause problems with next-image-export-optimizer. Please add this line to your next.config.[js/ts].

It works without this library again...

[sovetski]

Now I have also issues with the config pageExtensions from next.config.ts, it just ignores my config 😫

[amannn]

Can you show your next.config.ts? I've used next-intl in combination with MDX and also other config (example), never saw an issue so far with this.

[sovetski]

Hello, yes I saw these examples and honestly I don't understand why it does not work, there is my config:

import path from "node:path";
import type { NextConfig } from "next";
import { PHASE_DEVELOPMENT_SERVER } from "next/constants";

const nextConfig = (phase: string): NextConfig => ({
	output: "export",
	images: {
		loader: "custom",
		imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
		deviceSizes: [640, 750, 828, 1080],
	},
	transpilePackages: ["next-image-export-optimizer"],
	env: {
		nextImageExportOptimizer_imageFolderPath: "public/images",
		nextImageExportOptimizer_exportFolderPath: "out",
		nextImageExportOptimizer_quality: "75",
		nextImageExportOptimizer_storePicturesInWEBP: "true",
		nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
		nextImageExportOptimizer_generateAndUseBlurImages: "true",
		nextImageExportOptimizer_remoteImageCacheTTL: "0",
	},
	experimental: {
		optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
	},
	sassOptions: {
		implementation: "sass-embedded",
		additionalData: `@use "${path.join(process.cwd(), "_mantine").replace(/\\/g, "/")}" as mantine;`,
	},
	pageExtensions: (() => {
		const baseExtensions = ["ts", "tsx", "js", "jsx"];
		const isDevServer = phase === PHASE_DEVELOPMENT_SERVER;

		if (isDevServer) {
			return [
				...baseExtensions.map((ext) => `dev.${ext}`),
				...baseExtensions,
			];
		}

		return baseExtensions.filter((ext) => !ext.startsWith("dev."));
	})(),
	trailingSlash: false,
	skipTrailingSlashRedirect: true,
});

It looks like these parts are not working:

additionalData: @use "${path.join(process.cwd(), "_mantine").replace(/\/g, "/")}" as mantine;`` -> Docs: https://mantine.dev/styles/sass/

pageExtensions don't work too, it is used to exclude some pages from build step, I mean if I have a page with /about/page.dev.ts it should work in dev environment but ignored when it is building

[amannn]

I guess you might have passed this function to withNextIntl, right? withNextIntl expects a NextConfig and not a function that returns one.

Does that help?

[sovetski]

@amannn yes it is, I just sent you the original nextjs config but it is passed to the function withNextIntl

[sovetski]

@amannn I created the issue, it will be more simple: #1685