fix: Change imports to use .js to make them compatible with eslint-plugin-import (#1667)

@amannn Following our conversation on X, these are the changes that I've
made that appear to be fixing the imports when the `import/named` ESLint
rule is used.

As mentioned before, I also took the liberty of adding the ESLint rule
`'import/extensions': 'error'` to ensure the right extensions are used
in the import/export statements. For context, when compiling to ESM
modules, TS copies over the import/export statements as-is, so during
development, runtime compatible file extensions must be used.

For local testing I ran a build and then manually copied over the `dist`
folder into `node_modules/next-intl` in my other project.

Author: DuckThom

packages/next-intl/eslint.config.mjs

@@ -27,6 +27,7 @@ export default (await getPresets('typescript', 'react', 'vitest')).concat({
     '@typescript-eslint/consistent-type-imports': 'error',
     '@typescript-eslint/consistent-type-exports': 'error',
     '@typescript-eslint/no-import-type-side-effects': 'error',
-    'import/no-duplicates': ['error', {'prefer-inline': true}]
+    'import/no-duplicates': ['error', {'prefer-inline': true}],
+    'import/extensions': 'error'
   }
 });

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

@@ -6,4 +6,4 @@
  * from `./react-server` instead.
  */
 
-export * from './react-client/index.tsx';
+export * from './react-client/index.js';

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

@@ -1 +1 @@
-export * from './react-server/index.tsx';
+export * from './react-server/index.js';

packages/next-intl/src/middleware.tsx

@@ -1 +1 @@
-export {default} from './middleware/index.tsx';
+export {default} from './middleware/index.js';

packages/next-intl/src/middleware/getAlternateLinksHeaderValue.test.tsx

@@ -2,9 +2,9 @@
 
 import {NextRequest} from 'next/server.js';
 import {afterEach, beforeEach, describe, expect, it} from 'vitest';
-import {receiveRoutingConfig} from '../routing/config.tsx';
-import type {Pathnames} from '../routing.tsx';
-import getAlternateLinksHeaderValue from './getAlternateLinksHeaderValue.tsx';
+import {receiveRoutingConfig} from '../routing/config.js';
+import type {Pathnames} from '../routing.js';
+import getAlternateLinksHeaderValue from './getAlternateLinksHeaderValue.js';
 
 describe.each([{basePath: undefined}, {basePath: '/base'}])(
   'basePath: $basePath',

packages/next-intl/src/middleware/getAlternateLinksHeaderValue.tsx

@@ -1,20 +1,20 @@
 import type {NextRequest} from 'next/server.js';
-import type {ResolvedRoutingConfig} from '../routing/config.tsx';
+import type {ResolvedRoutingConfig} from '../routing/config.js';
 import type {
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../routing/types.tsx';
-import {normalizeTrailingSlash} from '../shared/utils.tsx';
+} from '../routing/types.js';
+import {normalizeTrailingSlash} from '../shared/utils.js';
 import {
   applyBasePath,
   formatTemplatePathname,
   getHost,
   getLocalePrefixes,
   getNormalizedPathname,
   isLocaleSupportedOnDomain
-} from './utils.tsx';
+} from './utils.js';
 
 /**
  * See https://developers.google.com/search/docs/specialty/international/localized-versions

packages/next-intl/src/middleware/index.tsx

@@ -2,4 +2,4 @@
  * The middleware, available as `next-intl/middleware`.
  */
 
-export {default} from './middleware.tsx';
+export {default} from './middleware.js';

packages/next-intl/src/middleware/middleware.test.tsx

@@ -12,8 +12,8 @@ import {
   it,
   vi
 } from 'vitest';
-import createMiddleware from '../middleware.tsx';
-import {type Pathnames, defineRouting} from '../routing.tsx';
+import createMiddleware from '../middleware.js';
+import {type Pathnames, defineRouting} from '../routing.js';
 
 const COOKIE_LOCALE_NAME = 'NEXT_LOCALE';
 

packages/next-intl/src/middleware/middleware.tsx

@@ -1,20 +1,20 @@
 import {type NextRequest, NextResponse} from 'next/server.js';
-import {type RoutingConfig, receiveRoutingConfig} from '../routing/config.tsx';
+import {type RoutingConfig, receiveRoutingConfig} from '../routing/config.js';
 import type {
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../routing/types.tsx';
-import {HEADER_LOCALE_NAME} from '../shared/constants.tsx';
+} from '../routing/types.js';
+import {HEADER_LOCALE_NAME} from '../shared/constants.js';
 import {
   getLocalePrefix,
   matchesPathname,
   normalizeTrailingSlash
-} from '../shared/utils.tsx';
-import getAlternateLinksHeaderValue from './getAlternateLinksHeaderValue.tsx';
-import resolveLocale from './resolveLocale.tsx';
-import syncCookie from './syncCookie.tsx';
+} from '../shared/utils.js';
+import getAlternateLinksHeaderValue from './getAlternateLinksHeaderValue.js';
+import resolveLocale from './resolveLocale.js';
+import syncCookie from './syncCookie.js';
 import {
   applyBasePath,
   formatPathname,
@@ -26,7 +26,7 @@ import {
   getPathnameMatch,
   isLocaleSupportedOnDomain,
   sanitizePathname
-} from './utils.tsx';
+} from './utils.js';
 
 export default function createMiddleware<
   const AppLocales extends Locales,

packages/next-intl/src/middleware/resolveLocale.test.tsx

@@ -1,5 +1,5 @@
 import {describe, expect, it} from 'vitest';
-import {getAcceptLanguageLocale} from './resolveLocale.tsx';
+import {getAcceptLanguageLocale} from './resolveLocale.js';
 
 describe('getAcceptLanguageLocale', () => {
   it('resolves a more specific locale to a generic one', () => {

packages/next-intl/src/middleware/resolveLocale.tsx

@@ -2,19 +2,15 @@ import {match} from '@formatjs/intl-localematcher';
 import Negotiator from 'negotiator';
 import type {RequestCookies} from 'next/dist/server/web/spec-extension/cookies.js';
 import type {Locale} from 'use-intl';
-import type {ResolvedRoutingConfig} from '../routing/config.tsx';
+import type {ResolvedRoutingConfig} from '../routing/config.js';
 import type {
   DomainConfig,
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../routing/types.tsx';
-import {
-  getHost,
-  getPathnameMatch,
-  isLocaleSupportedOnDomain
-} from './utils.tsx';
+} from '../routing/types.js';
+import {getHost, getPathnameMatch, isLocaleSupportedOnDomain} from './utils.js';
 
 function findDomainFromHost<AppLocales extends Locales>(
   requestHeaders: Headers,

packages/next-intl/src/middleware/syncCookie.tsx

@@ -3,15 +3,15 @@ import type {Locale} from 'use-intl';
 import type {
   InitializedLocaleCookieConfig,
   ResolvedRoutingConfig
-} from '../routing/config.tsx';
+} from '../routing/config.js';
 import type {
   DomainConfig,
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../routing/types.tsx';
-import {getAcceptLanguageLocale} from './resolveLocale.tsx';
+} from '../routing/types.js';
+import {getAcceptLanguageLocale} from './resolveLocale.js';
 
 export default function syncCookie<
   AppLocales extends Locales,

packages/next-intl/src/middleware/utils.test.tsx

@@ -5,7 +5,7 @@ import {
   getNormalizedPathname,
   getPathnameMatch,
   getRouteParams
-} from './utils.tsx';
+} from './utils.js';
 
 describe('getNormalizedPathname', () => {
   it('should return the normalized pathname', () => {

packages/next-intl/src/middleware/utils.tsx

@@ -6,15 +6,15 @@ import type {
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../routing/types.tsx';
+} from '../routing/types.js';
 import {
   getLocalePrefix,
   getSortedPathnames,
   matchesPathname,
   normalizeTrailingSlash,
   prefixPathname,
   templateToRegex
-} from '../shared/utils.tsx';
+} from '../shared/utils.js';
 
 export function getFirstPathnameSegment(pathname: string) {
   return pathname.split('/')[1];

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

@@ -1 +1 @@
-export * from './navigation/react-client/index.tsx';
+export * from './navigation/react-client/index.js';

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

@@ -1 +1 @@
-export * from './navigation/react-server/index.tsx';
+export * from './navigation/react-server/index.js';

packages/next-intl/src/navigation/createNavigation.test.tsx

@@ -7,14 +7,10 @@ import {
 import {renderToString} from 'react-dom/server';
 import {type Locale, useLocale} from 'use-intl';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {
-  type DomainsConfig,
-  type Pathnames,
-  defineRouting
-} from '../routing.tsx';
-import createNavigationClient from './react-client/createNavigation.tsx';
-import createNavigationServer from './react-server/createNavigation.tsx';
-import getServerLocale from './react-server/getServerLocale.tsx';
+import {type DomainsConfig, type Pathnames, defineRouting} from '../routing.js';
+import createNavigationClient from './react-client/createNavigation.js';
+import createNavigationServer from './react-server/createNavigation.js';
+import getServerLocale from './react-server/getServerLocale.js';
 
 vi.mock('react');
 vi.mock('next/navigation.js', async () => ({

packages/next-intl/src/navigation/react-client/createNavigation.test.tsx

@@ -5,8 +5,8 @@ import {
 } from 'next/navigation.js';
 import {type Locale, useLocale} from 'use-intl';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
-import type {DomainsConfig, Pathnames} from '../../routing.tsx';
-import createNavigation from './createNavigation.tsx';
+import type {DomainsConfig, Pathnames} from '../../routing.js';
+import createNavigation from './createNavigation.js';
 
 vi.mock('next/navigation.js');
 vi.mock('use-intl', async () => ({

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

@@ -7,17 +7,17 @@ import {type Locale, useLocale} from 'use-intl';
 import type {
   RoutingConfigLocalizedNavigation,
   RoutingConfigSharedNavigation
-} from '../../routing/config.tsx';
+} from '../../routing/config.js';
 import type {
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../../routing/types.tsx';
-import createSharedNavigationFns from '../shared/createSharedNavigationFns.tsx';
-import syncLocaleCookie from '../shared/syncLocaleCookie.tsx';
-import {getRoute} from '../shared/utils.tsx';
-import useBasePathname from './useBasePathname.tsx';
+} from '../../routing/types.js';
+import createSharedNavigationFns from '../shared/createSharedNavigationFns.js';
+import syncLocaleCookie from '../shared/syncLocaleCookie.js';
+import {getRoute} from '../shared/utils.js';
+import useBasePathname from './useBasePathname.js';
 
 export default function createNavigation<
   const AppLocales extends Locales,

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

@@ -1,2 +1,2 @@
-export {default as createNavigation} from './createNavigation.tsx';
-export type {QueryParams} from '../shared/utils.tsx';
+export {default as createNavigation} from './createNavigation.js';
+export type {QueryParams} from '../shared/utils.js';

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

@@ -1,8 +1,8 @@
 import {render, screen} from '@testing-library/react';
 import {usePathname as useNextPathname} from 'next/navigation.js';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {NextIntlClientProvider, useLocale} from '../../index.react-client.tsx';
-import useBasePathname from './useBasePathname.tsx';
+import {NextIntlClientProvider, useLocale} from '../../index.react-client.js';
+import useBasePathname from './useBasePathname.js';
 
 vi.mock('next/navigation.js');
 vi.mock('use-intl', async () => ({

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

@@ -5,13 +5,13 @@ import type {
   LocalePrefixConfigVerbose,
   LocalePrefixMode,
   Locales
-} from '../../routing/types.tsx';
+} from '../../routing/types.js';
 import {
   getLocaleAsPrefix,
   getLocalePrefix,
   hasPathnamePrefixed,
   unprefixPathname
-} from '../../shared/utils.tsx';
+} from '../../shared/utils.js';
 
 export default function useBasePathname<
   AppLocales extends Locales,

packages/next-intl/src/navigation/react-server/createNavigation.test.tsx

@@ -1,5 +1,5 @@
 import {describe, expect, it, vi} from 'vitest';
-import createNavigation from './createNavigation.tsx';
+import createNavigation from './createNavigation.js';
 
 vi.mock('react');
 

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

@@ -1,15 +1,15 @@
 import type {
   RoutingConfigLocalizedNavigation,
   RoutingConfigSharedNavigation
-} from '../../routing/config.tsx';
+} from '../../routing/config.js';
 import type {
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../../routing/types.tsx';
-import createSharedNavigationFns from '../shared/createSharedNavigationFns.tsx';
-import getServerLocale from './getServerLocale.tsx';
+} from '../../routing/types.js';
+import createSharedNavigationFns from '../shared/createSharedNavigationFns.js';
+import getServerLocale from './getServerLocale.js';
 
 export default function createNavigation<
   const AppLocales extends Locales,

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

@@ -1,4 +1,4 @@
-import getConfig from '../../server/react-server/getConfig.tsx';
+import getConfig from '../../server/react-server/getConfig.js';
 
 /**
  * This is only moved to a separate module for easier mocking in

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

@@ -1,2 +1,2 @@
-export {default as createNavigation} from './createNavigation.tsx';
-export type {Pathnames} from '../../routing/types.tsx';
+export {default as createNavigation} from './createNavigation.js';
+export type {Pathnames} from '../../routing/types.js';

packages/next-intl/src/navigation/shared/BaseLink.tsx

@@ -11,8 +11,8 @@ import {
   useState
 } from 'react';
 import {type Locale, useLocale} from 'use-intl';
-import type {InitializedLocaleCookieConfig} from '../../routing/config.tsx';
-import syncLocaleCookie from './syncLocaleCookie.tsx';
+import type {InitializedLocaleCookieConfig} from '../../routing/config.js';
+import syncLocaleCookie from './syncLocaleCookie.js';
 
 type NextLinkProps = Omit<ComponentProps<'a'>, keyof LinkProps> &
   Omit<LinkProps, 'locale'>;

packages/next-intl/src/navigation/shared/createSharedNavigationFns.tsx

@@ -8,18 +8,18 @@ import {
   type RoutingConfigLocalizedNavigation,
   type RoutingConfigSharedNavigation,
   receiveRoutingConfig
-} from '../../routing/config.tsx';
+} from '../../routing/config.js';
 import type {
   DomainConfig,
   DomainsConfig,
   LocalePrefixMode,
   Locales,
   Pathnames
-} from '../../routing/types.tsx';
-import type {ParametersExceptFirst, Prettify} from '../../shared/types.tsx';
-import use from '../../shared/use.tsx';
-import {isLocalizableHref} from '../../shared/utils.tsx';
-import BaseLink from './BaseLink.tsx';
+} from '../../routing/types.js';
+import type {ParametersExceptFirst, Prettify} from '../../shared/types.js';
+import use from '../../shared/use.js';
+import {isLocalizableHref} from '../../shared/utils.js';
+import BaseLink from './BaseLink.js';
 import {
   type HrefOrHrefWithParams,
   type HrefOrUrlObjectWithParams,
@@ -29,7 +29,7 @@ import {
   normalizeNameOrNameWithParams,
   serializeSearchParams,
   validateReceivedConfig
-} from './utils.tsx';
+} from './utils.js';
 
 type PromiseOrValue<Type> = Type | Promise<Type>;
 

packages/next-intl/src/navigation/shared/syncLocaleCookie.tsx

@@ -1,6 +1,6 @@
 import type {Locale} from 'use-intl';
-import type {InitializedLocaleCookieConfig} from '../../routing/config.tsx';
-import {getBasePath} from './utils.tsx';
+import type {InitializedLocaleCookieConfig} from '../../routing/config.js';
+import {getBasePath} from './utils.js';
 
 /**
  * We have to keep the cookie value in sync as Next.js might

packages/next-intl/src/navigation/shared/utils.test.tsx

@@ -3,7 +3,7 @@ import {
   compileLocalizedPathname,
   getBasePath,
   serializeSearchParams
-} from './utils.tsx';
+} from './utils.js';
 
 describe('serializeSearchParams', () => {
   it('handles strings', () => {