Fix Turbopack 'path.join is very dynamic' Error

[lars-hagen]

Fix Turbopack "path.join is very dynamic" Error

Summary

This PR fixes a bug where code-inspector's existing turbopack support fails when Turbopack applies stricter static analysis, particularly when middleware.ts files are present.

Problem

Code-inspector already has turbopack support, but it breaks in certain scenarios:

Error: [plugin:webpack-code-inspector-plugin] × Input is not valid: "path.join" is very dynamic

Root Cause

The current implementation uses Node.js path APIs (path.resolve, fileURLToPath) to dynamically locate the webpack loader. In certain scenarios (such as when middleware.ts is present), Turbopack applies stricter static analysis that disallows these dynamic operations.

Solution

This PR fixes the issue by:

• Creating a dedicated turbopack-loader that avoids Node.js path APIs
• Directly referencing the loader via package exports (@code-inspector/turbopack/dist/turbopack-loader.js)
• Ensuring compatibility with Turbopack's strict static analysis mode

Usage

// next.config.ts
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  turbopack: {
    rules: codeInspectorPlugin({
      bundler: 'turbopack',
      editor: 'code',
      showSwitch: true,
    }),
  }
};

export default nextConfig;

How to Reproduce the Bug

Option A: Create a new app from scratch

1. Create a new Next.js app:

npx create-next-app@latest turbopack-test --typescript --eslint --tailwind --app --src-dir --import-alias "@/*" --use-pnpm --yes
cd turbopack-test

2. Install code-inspector:

pnpm add -D code-inspector-plugin

3. Configure code-inspector in next.config.ts:

import type { NextConfig } from "next";
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  turbopack: {
    rules: codeInspectorPlugin({
      bundler: 'turbopack',
      editor: 'code',
      showSwitch: true,
    }),
  },
};

export default nextConfig;

4. Create src/middleware.ts:

export function middleware() {
  // Even an empty middleware triggers the issue
}

5. Run the dev server:

pnpm dev --turbopack

6. Visit http://localhost:3000 in your browser

7. Error occurs: [plugin:webpack-code-inspector-plugin] × Input is not valid: "path.join" is very dynamic

Option B: Use the existing demo in this repository

1. Clone this repository and navigate to the demo:

cd demos/turbopack-next15

2. Update package.json to use the published version instead of workspace:

"code-inspector-plugin": "1.2.7",

3. Install dependencies:

pnpm install

4. Run the dev server:

pnpm dev

5. Visit http://localhost:3000 in your browser

6. Error occurs: [plugin:webpack-code-inspector-plugin] × Input is not valid: "path.join" is very dynamic

Note: With this PR's changes (using workspace:^), the error is fixed and code-inspector works correctly.

This error primarily occurs with middleware.ts files, but may happen in other scenarios where Turbopack applies strict static analysis.

Testing

Tested with Next.js 15.5.2 in turbopack mode:

• ✅ Fixes the "path.join is very dynamic" error
• ✅ Works correctly with middleware.ts files present
• ✅ Adds data-inspector attributes to JSX elements
• ✅ Injects the code inspector client
• ✅ Works with both app router and pages router

Compatibility

• Next.js 15.3+ (when turbopack rules API was introduced)
• Works with both app router and pages router
• Compatible with TypeScript and JavaScript projects
• Resolves compatibility issues with Turbopack's strict static analysis mode

[lars-hagen]

I'm closing this PR because I discovered the "fix" was accidental and incomplete.

See PR #398 for a cleaner implementation.