Fix turbopack config to interpret files as TSX instead of JS

Author: remorses

server-actions-for-next-pages/CHANGELOG.md

@@ -1,5 +1,16 @@
 # server-actions-for-next-pages
 
+## 1.5.10
+
+### Patch Changes
+
+- Fix turbopack configuration bug where files were interpreted as JS instead of TSX
+- Restore `as: '*.tsx'` in turbopack loader config to ensure proper TypeScript/JSX interpretation
+- Restore browser/default structure in turbopack.rules for correct client/server detection
+- Revert turbopackLoader to use `export default` instead of `module.exports`
+- Remove experimental.turbo config, use only turbopack.rules
+- Remove incorrect Next.js 16 documentation comments
+
 ## 1.5.9
 
 ### Patch Changes

server-actions-for-next-pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-actions-for-next-pages",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "description": "Use Next.js server actions in your pages directory",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

server-actions-for-next-pages/src/index.ts

@@ -101,99 +101,47 @@ export function plugins({
 }
 
 function applyTurbopackOptions(nextConfig: NextConfig): void {
-  // ⚠️ IMPORTANT: Turbopack custom loaders are NOT working in Next.js 16.0.0-beta.0
-  // Users MUST run builds with --webpack flag: `next build --webpack`
-  // Only Next.js 15 with experimental.turbo is currently supported
-  //
-  // Official Turbopack documentation:
-  // https://nextjs.org/docs/app/api-reference/next-config-js/turbopack
-  // https://github.com/vercel/next.js/blob/canary/docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx
-  // 
-  // Advanced condition syntax (added in Next.js 16.0.0):
-  // https://nextjs.org/docs/app/api-reference/next-config-js/turbopack#advanced-webpack-loader-conditions
-  //
-  // Boolean operators:
-  // - { all: [...] } - all conditions must be true (AND)
-  // - { any: [...] } - at least one condition must be true (OR)
-  // - { not: ... } - negation (NOT)
-  //
-  // Customizable operators:
-  // - { path: string | RegExp } - matches file path (glob or regex)
-  // - { content: RegExp } - matches file content
-  // - If path and content are in same object, acts as implicit AND
-  //
-  // Built-in conditions (strings):
-  // - 'browser' - matches client-side code
-  // - 'foreign' - matches node_modules and Next.js internals
-  // - 'development' - matches next dev
-  // - 'production' - matches next build  
-  // - 'node' - matches Node.js runtime
-  // - 'edge-light' - matches Edge runtime
-  //
-  // Rules can be object or array of objects for different conditions
-  //
-  // Real-world examples from GitHub:
-  // - https://github.com/EC-WIN-24-NET/Khala/blob/main/next.config.ts
-  // - https://github.com/ShizNick84/Scalping_Alchemist_Bolt/blob/main/next.config.js
-  //
-  // Example syntax for Next.js 16 (when loaders are fixed):
-  // turbopack: {
-  //   rules: {
-  //     '**/*.{ts,tsx,js,jsx}': [
-  //       {
-  //         condition: {
-  //           all: [
-  //             'browser',
-  //             { not: 'foreign' },
-  //             { content: /"poor man's use server"|'poor man's use server'/ }
-  //           ]
-  //         },
-  //         loaders: [{ loader: loaderPath, options: { isServer: false, ... } }],
-  //         as: '*.js' // optional: output file extension
-  //       },
-  //       {
-  //         condition: {
-  //           all: [
-  //             { not: 'browser' },
-  //             { not: 'foreign' },
-  //             { content: /"poor man's use server"|'poor man's use server'/ }
-  //           ]
-  //         },
-  //         loaders: [{ loader: loaderPath, options: { isServer: true, ... } }],
-  //         as: '*.js'
-  //       }
-  //     ]
-  //   }
-  // }
+  // Configure Turbopack to apply Babel transformation to TypeScript/JavaScript files
+  // Docs: https://nextjs.org/docs/app/api-reference/next-config-js/turbopack
 
   const pagesDir = findPagesDir(process.cwd());
   const basePath = (nextConfig.basePath as string) || '/';
   const loaderPath = require.resolve('../dist/turbopackLoader');
 
-  // Next.js 15 experimental.turbo.rules configuration
   const loaderConfig = {
-    loaders: [
-      {
-        loader: loaderPath,
-        options: {
-          isServer: true,
-          pagesDir,
-          isAppDir: false,
-          basePath,
+    browser: {
+      as: '*.tsx',
+      loaders: [
+        {
+          loader: loaderPath,
+          options: {
+            isServer: false,
+            pagesDir,
+            isAppDir: false,
+            basePath,
+          },
         },
-      },
-    ],
+      ],
+    },
+    default: {
+      as: '*.tsx',
+      loaders: [
+        {
+          loader: loaderPath,
+          options: {
+            isServer: true,
+            pagesDir,
+            isAppDir: false,
+            basePath,
+          },
+        },
+      ],
+    },
   };
 
-  // Only configure experimental.turbo for Next.js 15
-  // Next.js 16 turbopack does not properly support custom loaders yet
-  nextConfig.experimental ??= {};
-  (nextConfig.experimental as any).turbo ??= {};
-  (nextConfig.experimental as any).turbo.rules ??= {};
-  (nextConfig.experimental as any).turbo.rules['**/*.{ts,tsx,js,jsx}'] = loaderConfig;
-  
-  // Do NOT configure turbopack.rules for Next.js 16 - it doesn't work in beta.0
-  // Users must use --webpack flag with Next.js 16
+  (nextConfig as any).turbopack ??= {};
+  (nextConfig as any).turbopack.rules ??= {};
+  (nextConfig as any).turbopack.rules['**/*.{ts,tsx,js,jsx}'] = loaderConfig;
 }
 
 // taken from https://github.com/vercel/next.js/blob/v12.1.5/packages/next/lib/find-pages-dir.ts

server-actions-for-next-pages/src/turbopackLoader.ts

@@ -3,7 +3,7 @@ import { transform } from '@babel/core';
 import { plugins } from '.';
 import { logger } from './utils';
 
-module.exports = async function (
+export default async function (
   this: LoaderThis<any>,
   source: string,
   map: any,
@@ -13,11 +13,6 @@ module.exports = async function (
     map = JSON.parse(map);
   }
   try {
-    // Skip transformation if file doesn't have the directive
-    if (!source.includes('"poor man\'s use server"') && !source.includes("'poor man's use server'")) {
-      return callback(null, source, map);
-    }
-    
     const options = this.getOptions();
 
     const res = transform(source || '', {
@@ -46,8 +41,6 @@ module.exports = async function (
   }
 }
 
-module.exports.default = module.exports;
-
 export type LoaderThis<Options> = {
   /**
    * Path to the file being loaded