feat: Add full ESM support via an import export condition

examples/example-app-router-playground/tests/main.spec.ts

@@ -392,6 +392,8 @@ it('supports a consistent `now` value across the server and client', async ({
 }) => {
   await page.goto('/en/client');
 
+  // ensure this is consistent across main entry, /server and also /navigation
+
   const serverDate = await page.getByTestId('NowFromServer').textContent();
   const serverDateDelayed = await page
     .getByTestId('NowFromServerDelayed')

packages/next-intl/benchmarks/tree-shaking/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "import/no-unresolved": "off"
+  }
+}

packages/next-intl/benchmarks/tree-shaking/NextIntlClientProvider.js

@@ -0,0 +1,3 @@
+import {NextIntlClientProvider} from 'next-intl';
+
+window.NextIntlClientProvider = NextIntlClientProvider;

packages/next-intl/benchmarks/tree-shaking/createFormatter.js

@@ -0,0 +1,3 @@
+import {createFormatter} from 'next-intl';
+
+window.createFormatter = createFormatter;

packages/next-intl/benchmarks/tree-shaking/createTranslator.js

@@ -0,0 +1,3 @@
+import {createTranslator} from 'next-intl';
+
+window.createTranslator = createTranslator;

packages/next-intl/benchmarks/tree-shaking/navigation/createLocalizedPathnamesNavigation.js

@@ -0,0 +1,3 @@
+import {createLocalizedPathnamesNavigation} from 'next-intl/navigation';
+
+window.createLocalizedPathnamesNavigation = createLocalizedPathnamesNavigation;

packages/next-intl/benchmarks/tree-shaking/navigation/createSharedPathnamesNavigation.js

@@ -0,0 +1,3 @@
+import {createSharedPathnamesNavigation} from 'next-intl/navigation';
+
+window.createSharedPathnamesNavigation = createSharedPathnamesNavigation;

packages/next-intl/benchmarks/tree-shaking/useFormatter.js

@@ -0,0 +1,3 @@
+import {useFormatter} from 'next-intl';
+
+window.useFormatter = useFormatter;

packages/next-intl/benchmarks/tree-shaking/useLocale.js

@@ -0,0 +1,3 @@
+import {useLocale} from 'next-intl';
+
+window.useLocale = useLocale;

packages/next-intl/benchmarks/tree-shaking/useMessages.js

@@ -0,0 +1,3 @@
+import {useMessages} from 'next-intl';
+
+window.useMessages = useMessages;

packages/next-intl/benchmarks/tree-shaking/useNow.js

@@ -0,0 +1,3 @@
+import {useNow} from 'next-intl';
+
+window.useNow = useNow;

packages/next-intl/benchmarks/tree-shaking/useTimeZone.js

@@ -0,0 +1,3 @@
+import {useTimeZone} from 'next-intl';
+
+window.useTimeZone = useTimeZone;

packages/next-intl/benchmarks/tree-shaking/useTranslations.js

@@ -0,0 +1,3 @@
+import {useTranslations} from 'next-intl';
+
+window.useTranslations = useTranslations;

packages/next-intl/config.d.ts

@@ -1,3 +1,3 @@
-import config from './dist/types/src/config';
+import config from './dist/config';
 
 export = config;

packages/next-intl/middleware.d.ts

@@ -1,3 +1,3 @@
-import createMiddleware from './dist/types/src/middleware';
+import createMiddleware from './dist/middleware';
 
 export = createMiddleware;

packages/next-intl/navigation.d.ts

@@ -1 +1 @@
-export * from './dist/types/src/navigation.react-client';
+export * from './dist/navigation';

packages/next-intl/package.json

@@ -9,52 +9,94 @@
       "url": "https://github.com/sponsors/amannn"
     }
   ],
-  "description": "A minimal, but complete solution for internationalization in Next.js apps.",
+  "description": "Internationalization (i18n) for Next.js that gets out of your way.",
   "license": "MIT",
   "homepage": "https://next-intl-docs.vercel.app",
   "repository": {
     "type": "git",
     "url": "https://github.com/amannn/next-intl"
   },
   "scripts": {
-    "build": "rm -rf dist && rollup -c",
+    "build": "rm -rf dist && bunchee --external next-intl/config",
     "test": "TZ=Europe/Berlin vitest",
     "lint": "pnpm run lint:source && pnpm run lint:package",
     "lint:source": "eslint src test && tsc --noEmit",
-    "lint:package": "publint && attw --pack",
+    "lint:package": "publint",
     "prepublishOnly": "CI=true turbo test && turbo lint && turbo build && cp ../../README.md .",
     "postpublish": "git checkout . && rm ./README.md",
     "size": "size-limit"
   },
-  "main": "./dist/index.react-client.js",
-  "module": "./dist/esm/index.react-client.js",
-  "typings": "./dist/types/src/index.react-client.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "typings": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/src/index.react-client.d.ts",
-      "react-server": "./dist/esm/index.react-server.js",
-      "default": "./dist/index.react-client.js"
+      "react-server": "./dist/index.react-server.mjs",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "default": "./dist/index.js"
     },
     "./server": {
-      "types": "./server.d.ts",
-      "react-server": "./dist/esm/server.react-server.js",
-      "default": "./dist/server.react-client.js"
+      "react-server": "./dist/server.react-server.mjs",
+      "import": {
+        "types": "./dist/server.d.mts",
+        "default": "./dist/server.mjs"
+      },
+      "require": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.js"
+      },
+      "default": "./dist/server.js"
+    },
+    "./navigation": {
+      "react-server": "./dist/navigation.react-server.mjs",
+      "import": {
+        "types": "./dist/navigation.d.mts",
+        "default": "./dist/navigation.mjs"
+      },
+      "require": {
+        "types": "./dist/navigation.d.ts",
+        "default": "./dist/navigation.js"
+      },
+      "default": "./dist/navigation.js"
     },
     "./config": {
-      "types": "./config.d.ts",
+      "import": {
+        "types": "./dist/config.d.mts",
+        "default": "./dist/config.mjs"
+      },
+      "require": {
+        "types": "./dist/config.d.ts",
+        "default": "./dist/config.js"
+      },
       "default": "./dist/config.js"
     },
     "./middleware": {
-      "types": "./middleware.d.ts",
+      "import": {
+        "types": "./dist/middleware.d.mts",
+        "default": "./dist/middleware.mjs"
+      },
+      "require": {
+        "types": "./dist/middleware.d.ts",
+        "default": "./dist/middleware.js"
+      },
       "default": "./dist/middleware.js"
     },
-    "./navigation": {
-      "types": "./navigation.d.ts",
-      "react-server": "./dist/esm/navigation.react-server.js",
-      "default": "./dist/navigation.react-client.js"
-    },
     "./plugin": {
-      "types": "./plugin.d.ts",
+      "import": {
+        "types": "./dist/plugin.d.mts",
+        "default": "./dist/plugin.mjs"
+      },
+      "require": {
+        "types": "./dist/plugin.d.ts",
+        "default": "./dist/plugin.js"
+      },
       "default": "./dist/plugin.js"
     }
   },
@@ -97,6 +139,7 @@
     "@types/node": "^20.1.2",
     "@types/react": "18.2.34",
     "@types/react-dom": "^18.2.17",
+    "bunchee": "5.0.0-beta.1",
     "eslint": "^8.54.0",
     "eslint-config-molindo": "^7.0.0",
     "eslint-plugin-deprecation": "^1.4.1",
@@ -105,8 +148,6 @@
     "publint": "^0.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.28.1",
-    "rollup-plugin-preserve-directives": "0.2.0",
     "size-limit": "^8.2.6",
     "typescript": "^5.2.2",
     "vitest": "^1.0.1"
@@ -139,6 +180,50 @@
     {
       "path": "dist/production/middleware.js",
       "limit": "5.855 KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/createFormatter.js",
+      "limit": "1.4KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/createTranslator.js",
+      "limit": "11.2KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/NextIntlClientProvider.js",
+      "limit": "1KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/useFormatter.js",
+      "limit": "12.4KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/useLocale.js",
+      "limit": "0.4KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/useMessages.js",
+      "limit": "0.3KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/useNow.js",
+      "limit": "0.3KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/useTimeZone.js",
+      "limit": "0.2KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/useTranslations.js",
+      "limit": "12.5KB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/navigation/createLocalizedPathnamesNavigation.js",
+      "limit": "2.5kB"
+    },
+    {
+      "path": "benchmarks/tree-shaking/navigation/createSharedPathnamesNavigation.js",
+      "limit": "1.7KB"
     }
   ]
 }

packages/next-intl/plugin.d.ts

@@ -1,8 +1,3 @@
-import {NextConfig} from 'next';
+import createNextIntlPlugin from './dist/plugin';
 
-function createNextIntlPlugin(
-  i18nPath?: string
-): (config?: NextConfig) => NextConfig;
-
-// Currently only available via CJS
 export = createNextIntlPlugin;

packages/next-intl/server.d.ts

@@ -1 +1 @@
-export * from './dist/types/src/server/react-server';
+export * from './dist/server';

packages/next-intl/src/navigation/react-client/useBasePathname.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {usePathname as useNextPathname} from 'next/navigation';
 import {useMemo} from 'react';
 import useLocale from '../../react-client/useLocale';

packages/next-intl/src/navigation/react-server/ServerLink.tsx

@@ -1,5 +1,6 @@
+// @ts-ignore -- Only available after build
+import {_getRequestLocale as getRequestLocale} from 'next-intl/server';
 import React, {ComponentProps} from 'react';
-import {getLocale} from '../../server.react-server';
 import {AllLocales} from '../../shared/types';
 import BaseLink from '../shared/BaseLink';
 
@@ -14,5 +15,5 @@ export default async function ServerLink<Locales extends AllLocales>({
   locale,
   ...rest
 }: Props<Locales>) {
-  return <BaseLink locale={locale || (await getLocale())} {...rest} />;
+  return <BaseLink locale={locale || getRequestLocale()} {...rest} />;
 }

packages/next-intl/src/navigation/react-server/createLocalizedPathnamesNavigation.tsx

@@ -1,5 +1,6 @@
+// @ts-ignore -- Only available after build
+import {_getRequestLocale as getRequestLocale} from 'next-intl/server';
 import React, {ComponentProps} from 'react';
-import {getRequestLocale} from '../../server/react-server/RequestLocale';
 import {
   AllLocales,
   LocalePrefix,

packages/next-intl/src/navigation/react-server/serverRedirect.tsx

@@ -1,4 +1,5 @@
-import {getRequestLocale} from '../../server/react-server/RequestLocale';
+// @ts-ignore -- Only available after build
+import {_getRequestLocale as getRequestLocale} from 'next-intl/server';
 import {LocalePrefix, ParametersExceptFirst} from '../../shared/types';
 import baseRedirect from '../shared/baseRedirect';
 

packages/next-intl/src/plugin.tsx

@@ -107,8 +107,13 @@ function initPlugin(i18nPath?: string, nextConfig?: NextConfig): NextConfig {
   return Object.assign({}, nextConfig, nextIntlConfig);
 }
 
-module.exports = function createNextIntlPlugin(i18nPath?: string) {
+export default function createNextIntlPlugin(i18nPath?: string) {
   return function withNextIntl(nextConfig?: NextConfig) {
     return initPlugin(i18nPath, nextConfig);
   };
-};
+}
+
+// Compat with CJS default export
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = createNextIntlPlugin;
+}

packages/next-intl/src/react-client/useLocale.tsx

@@ -1,6 +1,5 @@
 import {useParams} from 'next/navigation';
-// Workaround for some bundle splitting until we have ESM
-import {useLocale as useBaseLocale} from 'use-intl/_useLocale';
+import {useLocale as useBaseLocale} from 'use-intl/react';
 import {LOCALE_SEGMENT_NAME} from '../shared/constants';
 
 export default function useLocale(): string {

packages/next-intl/src/react-server/NextIntlClientProviderServer.tsx

@@ -1,5 +1,9 @@
+import {
+  _getRequestLocale as getRequestLocale,
+  _getConfig as getConfig
+  // @ts-ignore -- Only available after build
+} from 'next-intl/server';
 import React, {ComponentProps} from 'react';
-import {getLocale, getNow, getTimeZone} from '../server.react-server';
 import BaseNextIntlClientProvider from '../shared/NextIntlClientProvider';
 
 type Props = ComponentProps<typeof BaseNextIntlClientProvider>;
@@ -10,13 +14,17 @@ export default async function NextIntlClientProviderServer({
   timeZone,
   ...rest
 }: Props) {
+  // We need to be careful about potentially reading from headers here.
+  // See https://github.com/amannn/next-intl/issues/631
+  if (!locale) locale = getRequestLocale();
+  if (!now) now = await getConfig(locale).now;
+  if (!timeZone) timeZone = await getConfig(locale).timeZone;
+
   return (
     <BaseNextIntlClientProvider
-      // We need to be careful about potentially reading from headers here.
-      // See https://github.com/amannn/next-intl/issues/631
-      locale={locale ?? (await getLocale())}
-      now={now ?? (await getNow())}
-      timeZone={timeZone ?? (await getTimeZone())}
+      locale={locale}
+      now={now}
+      timeZone={timeZone}
       {...rest}
     />
   );

packages/next-intl/src/react-server/useConfig.tsx

@@ -1,5 +1,6 @@
+// @ts-ignore -- Only available after build
+import {_getConfig as getConfig} from 'next-intl/server';
 import {use} from 'react';
-import getConfig from '../server/react-server/getConfig';
 import useLocale from './useLocale';
 
 function useHook<Value>(hookName: string, promise: Promise<Value>) {

packages/next-intl/src/react-server/useLocale.tsx

@@ -1,5 +1,6 @@
+// @ts-ignore -- Only available after build
+import {_getRequestLocale as getRequestLocale} from 'next-intl/server';
 import type {useLocale as useLocaleType} from 'use-intl';
-import {getRequestLocale} from '../server/react-server/RequestLocale';
 
 export default function useLocale(
   // eslint-disable-next-line no-empty-pattern

packages/next-intl/src/react-server/useMessages.tsx

@@ -1,5 +1,5 @@
 import type {useMessages as useMessagesType} from 'use-intl';
-import {getMessagesFromConfig} from '../server/react-server/getMessages';
+import getMessagesFromConfig from '../shared/getMessagesFromConfig';
 import useConfig from './useConfig';
 
 export default function useMessages(