fix: resolve module import issues for Next.js/Turbopack compatibility

- Remove .js extensions from all TypeScript imports throughout codebase
- Update dev config to use testProvider instead of mollieProvider for testing
- Fix module resolution issues preventing development server startup
- Enable proper testing of billing plugin functionality with test provider

This resolves the "Module not found: Can't resolve" errors that were
preventing the development server from starting with Next.js/Turbopack.
All TypeScript imports now use extension-less imports as required.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

dev/payload.config.ts

@@ -8,7 +8,7 @@ import { fileURLToPath } from 'url'
 import { testEmailAdapter } from './helpers/testEmailAdapter'
 import { seed } from './seed'
 import billingPlugin from '../src/plugin'
-import { mollieProvider } from '../src/providers'
+import { testProvider } from '../src/providers'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -50,8 +50,13 @@ const buildConfigWithSQLite = () => {
     plugins: [
       billingPlugin({
         providers: [
-          mollieProvider({
-            apiKey: process.env.MOLLIE_KEY!
+          testProvider({
+            enabled: true,
+            testModeIndicators: {
+              showWarningBanners: true,
+              showTestBadges: true,
+              consoleWarnings: true
+            }
           })
         ],
         collections: {

src/collections/hooks.ts

@@ -1,6 +1,6 @@
-import type { Payment } from '../plugin/types/index.js'
+import type { Payment } from '../plugin/types/index'
 import type { Payload } from 'payload'
-import { useBillingPlugin } from '../plugin/index.js'
+import { useBillingPlugin } from '../plugin/index'
 
 export const initProviderPayment = (payload: Payload, payment: Partial<Payment>) => {
   const billing = useBillingPlugin(payload)

src/collections/index.ts

@@ -1,3 +1,3 @@
-export { createInvoicesCollection } from './invoices.js'
-export { createPaymentsCollection } from './payments.js'
-export { createRefundsCollection } from './refunds.js'
+export { createInvoicesCollection } from './invoices'
+export { createPaymentsCollection } from './payments'
+export { createRefundsCollection } from './refunds'

src/collections/invoices.ts

@@ -5,10 +5,10 @@ import {
   CollectionBeforeValidateHook,
   CollectionConfig, Field,
 } from 'payload'
-import type { BillingPluginConfig} from '../plugin/config.js';
-import { defaults } from '../plugin/config.js'
-import { extractSlug } from '../plugin/utils.js'
-import type { Invoice } from '../plugin/types/invoices.js'
+import type { BillingPluginConfig} from '../plugin/config';
+import { defaults } from '../plugin/config'
+import { extractSlug } from '../plugin/utils'
+import type { Invoice } from '../plugin/types/invoices'
 
 export function createInvoicesCollection(pluginConfig: BillingPluginConfig): CollectionConfig {
   const {customerRelationSlug, customerInfoExtractor} = pluginConfig

src/collections/payments.ts

@@ -1,9 +1,9 @@
 import type { AccessArgs, CollectionBeforeChangeHook, CollectionConfig, Field } from 'payload'
-import type { BillingPluginConfig} from '../plugin/config.js';
-import { defaults } from '../plugin/config.js'
-import { extractSlug } from '../plugin/utils.js'
-import type { Payment } from '../plugin/types/payments.js'
-import { initProviderPayment } from './hooks.js'
+import type { BillingPluginConfig} from '../plugin/config';
+import { defaults } from '../plugin/config'
+import { extractSlug } from '../plugin/utils'
+import type { Payment } from '../plugin/types/payments'
+import { initProviderPayment } from './hooks'
 
 export function createPaymentsCollection(pluginConfig: BillingPluginConfig): CollectionConfig {
   const overrides = typeof pluginConfig.collections?.payments === 'object' ? pluginConfig.collections?.payments : {}

src/collections/refunds.ts

@@ -1,7 +1,7 @@
 import type { AccessArgs, CollectionConfig } from 'payload'
-import { BillingPluginConfig, defaults } from '../plugin/config.js'
-import { extractSlug } from '../plugin/utils.js'
-import { Payment } from '../plugin/types/index.js'
+import { BillingPluginConfig, defaults } from '../plugin/config'
+import { extractSlug } from '../plugin/utils'
+import { Payment } from '../plugin/types/index'
 
 export function createRefundsCollection(pluginConfig: BillingPluginConfig): CollectionConfig {
   // TODO: finish collection overrides

src/plugin/config.ts

@@ -1,6 +1,6 @@
 import { CollectionConfig } from 'payload'
-import { FieldsOverride } from './utils.js'
-import { PaymentProvider } from './types/index.js'
+import { FieldsOverride } from './utils'
+import { PaymentProvider } from './types/index'
 
 export const defaults = {
   paymentsCollection: 'payments',
@@ -20,7 +20,7 @@ export interface TestProviderConfig {
 }
 
 // Re-export the actual test provider config instead of duplicating
-export type { TestProviderConfig as AdvancedTestProviderConfig } from '../providers/test.js'
+export type { TestProviderConfig as AdvancedTestProviderConfig } from '../providers/test'
 
 // Customer info extractor callback type
 export interface CustomerInfoExtractor {

src/plugin/index.ts

@@ -1,8 +1,8 @@
-import { createInvoicesCollection, createPaymentsCollection, createRefundsCollection } from '../collections/index.js'
-import type { BillingPluginConfig } from './config.js'
+import { createInvoicesCollection, createPaymentsCollection, createRefundsCollection } from '../collections/index'
+import type { BillingPluginConfig } from './config'
 import type { Config, Payload } from 'payload'
-import { createSingleton } from './singleton.js'
-import type { PaymentProvider } from '../providers/index.js'
+import { createSingleton } from './singleton'
+import type { PaymentProvider } from '../providers/index'
 
 const singleton = createSingleton(Symbol('billingPlugin'))
 

src/plugin/types/invoices.ts

@@ -1,5 +1,5 @@
-import { Payment } from './payments.js'
-import { Id } from './id.js'
+import { Payment } from './payments'
+import { Id } from './id'
 
 export interface Invoice<TCustomer = unknown> {
   id: Id;

src/plugin/types/payments.ts

@@ -1,6 +1,6 @@
-import { Refund } from './refunds.js'
-import { Invoice } from './invoices.js'
-import { Id } from './id.js'
+import { Refund } from './refunds'
+import { Invoice } from './invoices'
+import { Id } from './id'
 
 export interface Payment {
   id: Id;

src/plugin/types/refunds.ts

@@ -1,4 +1,4 @@
-import { Payment } from './payments.js'
+import { Payment } from './payments'
 
 export interface Refund {
   id: number;

src/plugin/utils.ts

@@ -1,5 +1,5 @@
 import type { CollectionConfig, CollectionSlug, Field } from 'payload'
-import type { Id } from './types/index.js'
+import type { Id } from './types/index'
 
 export type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]
 

src/providers/index.ts

@@ -1,10 +1,10 @@
-export * from './mollie.js'
-export * from './stripe.js'
-export * from './test.js'
-export * from './types.js'
-export * from './currency.js'
+export * from './mollie'
+export * from './stripe'
+export * from './test'
+export * from './types'
+export * from './currency'
 
 // Re-export provider configurations and types
-export type { StripeProviderConfig } from './stripe.js'
-export type { MollieProviderConfig } from './mollie.js'
-export type { TestProviderConfig, PaymentOutcome, PaymentMethod, PaymentScenario } from './test.js'
+export type { StripeProviderConfig } from './stripe'
+export type { MollieProviderConfig } from './mollie'
+export type { TestProviderConfig, PaymentOutcome, PaymentMethod, PaymentScenario } from './test'

src/providers/mollie.ts

@@ -1,7 +1,7 @@
-import type { Payment } from '../plugin/types/payments.js'
-import type { PaymentProvider } from '../plugin/types/index.js'
+import type { Payment } from '../plugin/types/payments'
+import type { PaymentProvider } from '../plugin/types/index'
 import type { Payload } from 'payload'
-import { createSingleton } from '../plugin/singleton.js'
+import { createSingleton } from '../plugin/singleton'
 import type { createMollieClient, MollieClient } from '@mollie/api-client'
 import {
   webhookResponses,
@@ -10,8 +10,8 @@ import {
   updateInvoiceOnPaymentSuccess,
   handleWebhookError,
   validateProductionUrl
-} from './utils.js'
-import { formatAmountForProvider, isValidAmount, isValidCurrencyCode } from './currency.js'
+} from './utils'
+import { formatAmountForProvider, isValidAmount, isValidCurrencyCode } from './currency'
 
 const symbol = Symbol('mollie')
 export type MollieProviderConfig = Parameters<typeof createMollieClient>[0]

src/providers/stripe.ts

@@ -1,7 +1,7 @@
-import type { Payment } from '../plugin/types/payments.js'
-import type { PaymentProvider, ProviderData } from '../plugin/types/index.js'
+import type { Payment } from '../plugin/types/payments'
+import type { PaymentProvider, ProviderData } from '../plugin/types/index'
 import type { Payload } from 'payload'
-import { createSingleton } from '../plugin/singleton.js'
+import { createSingleton } from '../plugin/singleton'
 import type Stripe from 'stripe'
 import {
   webhookResponses,
@@ -10,8 +10,8 @@ import {
   updateInvoiceOnPaymentSuccess,
   handleWebhookError,
   logWebhookEvent
-} from './utils.js'
-import { isValidAmount, isValidCurrencyCode } from './currency.js'
+} from './utils'
+import { isValidAmount, isValidCurrencyCode } from './currency'
 
 const symbol = Symbol('stripe')
 

src/providers/test.ts

@@ -1,9 +1,9 @@
-import type { Payment } from '../plugin/types/payments.js'
-import type { PaymentProvider, ProviderData } from '../plugin/types/index.js'
-import type { BillingPluginConfig } from '../plugin/config.js'
+import type { Payment } from '../plugin/types/payments'
+import type { PaymentProvider, ProviderData } from '../plugin/types/index'
+import type { BillingPluginConfig } from '../plugin/config'
 import type { Payload } from 'payload'
-import { handleWebhookError, logWebhookEvent } from './utils.js'
-import { isValidAmount, isValidCurrencyCode } from './currency.js'
+import { handleWebhookError, logWebhookEvent } from './utils'
+import { isValidAmount, isValidCurrencyCode } from './currency'
 
 export type PaymentOutcome = 'paid' | 'failed' | 'cancelled' | 'expired' | 'pending'
 

src/providers/types.ts

@@ -1,6 +1,6 @@
-import type { Payment } from '../plugin/types/payments.js'
+import type { Payment } from '../plugin/types/payments'
 import type { Config, Payload } from 'payload'
-import type { BillingPluginConfig } from '../plugin/config.js'
+import type { BillingPluginConfig } from '../plugin/config'
 
 export type InitPayment = (payload: Payload, payment: Partial<Payment>) => Promise<Partial<Payment>>
 

src/providers/utils.ts

@@ -1,9 +1,9 @@
 import type { Payload } from 'payload'
-import type { Payment } from '../plugin/types/payments.js'
-import type { BillingPluginConfig } from '../plugin/config.js'
-import type { ProviderData } from './types.js'
-import { defaults } from '../plugin/config.js'
-import { extractSlug, toPayloadId } from '../plugin/utils.js'
+import type { Payment } from '../plugin/types/payments'
+import type { BillingPluginConfig } from '../plugin/config'
+import type { ProviderData } from './types'
+import { defaults } from '../plugin/config'
+import { extractSlug, toPayloadId } from '../plugin/utils'
 
 /**
  * Common webhook response utilities