fix ESM import extensions (#249)

Co-authored-by: Nick Nisi <[email protected]>

Author: dfrankland

.eslintrc.cjs

@@ -1,10 +1,30 @@
 module.exports = {
   root: true,
   extends: [
-		'eslint:recommended',
-		'prettier',
+    'eslint:recommended',
+    'prettier',
     'plugin:@typescript-eslint/recommended',
-    'plugin:require-extensions/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
   ],
-  plugins: ['require-extensions'],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        extensions: ['.js'],
+      },
+      node: {
+        extensions: ['.js'],
+      },
+    },
+  },
+  rules: {
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
 };

README.md

@@ -169,7 +169,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 For pages where you want to display a signed-in and signed-out view, use `withAuth` to retrieve the user session from WorkOS.
 
 ```jsx
-import Link from 'next/link';
+import Link from 'next/link.js';
 import { getSignInUrl, getSignUpUrl, withAuth, signOut } from '@workos-inc/authkit-nextjs';
 
 export default async function HomePage() {

__tests__/auth.spec.ts

@@ -2,20 +2,20 @@ import { describe, it, expect, beforeEach, jest } from '@jest/globals';
 
 import { getSignInUrl, getSignUpUrl, signOut, switchToOrganization } from '../src/auth.js';
 import * as session from '../src/session.js';
-import * as cache from 'next/cache';
+import * as cache from 'next/cache.js';
 import * as workosModule from '../src/workos.js';
 
 // These are mocked in jest.setup.ts
-import { cookies, headers } from 'next/headers';
-import { redirect } from 'next/navigation';
+import { cookies, headers } from 'next/headers.js';
+import { redirect } from 'next/navigation.js';
 import { generateSession, generateTestToken } from './test-helpers.js';
 import { sealData } from 'iron-session';
 import { getWorkOS } from '../src/workos.js';
 
 const workos = getWorkOS();
 
-jest.mock('next/cache', () => {
-  const actual = jest.requireActual<typeof cache>('next/cache');
+jest.mock('next/cache.js', () => {
+  const actual = jest.requireActual<typeof cache>('next/cache.js');
   return {
     ...actual,
     revalidateTag: jest.fn(),

__tests__/authkit-callback-route.spec.ts

@@ -1,9 +1,9 @@
 import { getWorkOS } from '../src/workos.js';
 import { handleAuth } from '../src/authkit-callback-route.js';
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server.js';
 
 // Mocked in jest.setup.ts
-import { cookies, headers } from 'next/headers';
+import { cookies, headers } from 'next/headers.js';
 
 // Mock dependencies
 const fakeWorkosInstance = {

__tests__/get-authorization-url.spec.ts

@@ -1,9 +1,9 @@
 import { describe, it, expect, beforeEach, jest } from '@jest/globals';
 import { getAuthorizationUrl } from '../src/get-authorization-url.js';
-import { headers } from 'next/headers';
+import { headers } from 'next/headers.js';
 import { getWorkOS } from '../src/workos.js';
 
-jest.mock('next/headers');
+jest.mock('next/headers.js');
 
 // Mock dependencies
 const fakeWorkosInstance = {

__tests__/session.spec.ts

@@ -1,6 +1,6 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { cookies, headers } from 'next/headers';
-import { redirect } from 'next/navigation';
+import { NextRequest, NextResponse } from 'next/server.js';
+import { cookies, headers } from 'next/headers.js';
+import { redirect } from 'next/navigation.js';
 import { generateTestToken } from './test-helpers.js';
 import { withAuth, updateSession, refreshSession, updateSessionMiddleware, getCustomClaims } from '../src/session.js';
 import { getWorkOS } from '../src/workos.js';

__tests__/test-helpers.ts

@@ -3,7 +3,7 @@
 import { sealData } from 'iron-session';
 import { SignJWT } from 'jose';
 import { WORKOS_COOKIE_NAME, WORKOS_COOKIE_PASSWORD } from '../src/env-variables.js';
-import { cookies } from 'next/headers';
+import { cookies } from 'next/headers.js';
 import { User } from '@workos-inc/node';
 
 export async function generateTestToken(payload = {}, expired = false) {

__tests__/utils.spec.ts

@@ -1,4 +1,4 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from 'next/server.js';
 import { redirectWithFallback, errorResponseWithFallback } from '../src/utils.js';
 
 describe('utils', () => {
@@ -37,7 +37,7 @@ describe('utils', () => {
 
       jest.resetModules();
 
-      jest.mock('next/server', () => ({
+      jest.mock('next/server.js', () => ({
         NextResponse: {
           // exists but has no redirect method
         },
@@ -58,7 +58,7 @@ describe('utils', () => {
       jest.resetModules();
 
       // Mock with undefined NextResponse
-      jest.mock('next/server', () => ({
+      jest.mock('next/server.js', () => ({
         NextResponse: undefined,
       }));
 
@@ -108,7 +108,7 @@ describe('utils', () => {
     it('falls back to standard Response when NextResponse exists but json is undefined', async () => {
       jest.resetModules();
 
-      jest.mock('next/server', () => ({
+      jest.mock('next/server.js', () => ({
         NextResponse: {
           // exists but has no json method
         },
@@ -126,7 +126,7 @@ describe('utils', () => {
     it('falls back to standard Response when NextResponse is undefined', async () => {
       jest.resetModules();
 
-      jest.mock('next/server', () => ({
+      jest.mock('next/server.js', () => ({
         NextResponse: undefined,
       }));
 

jest.setup.ts

@@ -5,7 +5,7 @@ process.env.NEXT_PUBLIC_WORKOS_REDIRECT_URI = 'http://localhost:3000/callback';
 process.env.WORKOS_COOKIE_DOMAIN = 'example.com';
 
 // Mock the next/headers module
-jest.mock('next/headers', () => {
+jest.mock('next/headers.js', () => {
   const cookieStore = new Map();
   const headersStore = new Map();
 
@@ -38,6 +38,6 @@ jest.mock('next/headers', () => {
   };
 });
 
-jest.mock('next/navigation', () => ({
+jest.mock('next/navigation.js', () => ({
   redirect: jest.fn(),
 }));