Fix Turbopack 'path.join is very dynamic' Error

demos/turbopack-next15/package.json

@@ -9,22 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "next": "15.4.4"
+    "next": "15.5.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
-    "eslint": "^9",
-    "eslint-config-next": "15.4.4",
-    "@eslint/eslintrc": "^3",
+    "@eslint/eslintrc": "^3.3.1",
+    "@mdx-js/loader": "^3.1.1",
+    "@next/mdx": "15.5.2",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "code-inspector-plugin": "workspace:^",
-    "@next/mdx": "15.4.4",
-    "@mdx-js/loader": "^3.1.0"
+    "eslint": "^9.34.0",
+    "eslint-config-next": "15.5.2",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2"
   }
 }

demos/turbopack-next15/src/middleware.ts

@@ -0,0 +1,4 @@
+export function middleware() {
+  // This empty middleware demonstrates that code-inspector
+  // works correctly with Turbopack when middleware.ts is present
+}

packages/code-inspector-plugin/package.json

@@ -42,6 +42,7 @@
   "keywords": [
     "webpack",
     "vite",
+    "turbopack",
     "plugin",
     "vue",
     "vscode",

packages/turbopack/package.json

@@ -23,7 +23,8 @@
         "types": "./types/index.d.ts",
         "default": "./dist/index.js"
       }
-    }
+    },
+    "./dist/turbopack-loader.js": "./dist/turbopack-loader.js"
   },
   "keywords": [
     "turbopack",
@@ -47,7 +48,7 @@
   },
   "scripts": {
     "clear": "rimraf ./dist && rimraf ./types",
-    "build": "pnpm clear && tsc && vite build",
+    "build": "pnpm clear && tsc && vite build && cp src/turbopack-loader.js dist/",
     "pub": "pnpm publish",
     "pub:beta": "pnpm publish --tag beta"
   }

packages/turbopack/src/index.ts

@@ -1,6 +1,8 @@
-import { CodeOptions, RecordInfo, isDev } from '@code-inspector/core';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import { 
+  CodeOptions, 
+  RecordInfo, 
+  isDev
+} from '@code-inspector/core';
 
 interface Options extends CodeOptions {
   close?: boolean;
@@ -23,38 +25,16 @@ export function TurbopackCodeInspectorPlugin(
     output: options.output,
   };
 
-  let WebpackEntry = null;
-  if (typeof require !== 'undefined' && typeof require.resolve === 'function') {
-    WebpackEntry = require.resolve('@code-inspector/webpack');
-  }
-  if (typeof import.meta.resolve === 'function') {
-    const dir = import.meta.resolve(
-      '@code-inspector/webpack'
-    ) as unknown as string;
-    WebpackEntry = fileURLToPath(dir);
-  }
-  const WebpackDistDir = path.resolve(WebpackEntry, '..');
-
   return {
-    '**/*.{jsx,tsx,js,ts,mjs,mts}': {
-      loaders: [
-        {
-          loader: `${WebpackDistDir}/loader.js`,
-          options: {
-            ...options,
-            record,
-          },
-          ...(options.enforcePre === false ? {} : { enforce: 'pre' }),
-        },
-        {
-          loader: `${WebpackDistDir}/inject-loader.js`,
-          options: {
-            ...options,
-            record,
-          },
-          enforce: 'pre',
-        },
-      ],
-    },
+    '**/*.{jsx,tsx}': {
+      loaders: [{
+        loader: '@code-inspector/turbopack/dist/turbopack-loader.js',
+        options: {
+          ...options,
+          record,
+          inject: true,
+        }
+      }]
+    }
   };
 }

packages/turbopack/src/turbopack-loader.js

@@ -0,0 +1,38 @@
+const {
+  normalizePath,
+  getCodeWithWebComponent,
+  isExcludedFile,
+  transformCode,
+  isJsTypeFile,
+} = require('@code-inspector/core');
+
+module.exports = async function turbopackLoader(content) {
+  this.cacheable && this.cacheable(true);
+  const filePath = normalizePath(this.resourcePath);
+  const options = this.query;
+
+  if (isExcludedFile(filePath, options)) {
+    return content;
+  }
+
+  // start server and inject client code to entry file
+  content = await getCodeWithWebComponent({
+    options,
+    file: filePath,
+    code: content,
+    record: options.record,
+  });
+
+  // Transform JSX/TSX files to add data-inspector attributes
+  if (isJsTypeFile(filePath)) {
+    content = transformCode({
+      content,
+      filePath,
+      fileType: 'jsx',
+      escapeTags: options.escapeTags || [],
+      pathType: options.pathType,
+    });
+  }
+
+  return content;
+};