Enable Debug Source Info (_debugInfo) in Dev Mode with SWC for dev tools like React Dev Tools / React Dev inspector

[givo]

Goals

1. Enable debug source info (_debugInfo) in development mode with Next.js using SWC.
2. Improve compatibility with React DevTools extension for better debugging.
3. Ensure support for server-side components in development mode.

Non-Goals

1. This request does not aim to switch from SWC to Babel.
2. This request does not cover production mode or minification settings.
3. This request does not include enhancements for other extensions or tools.

Background

I am working on a Next.js project using SWC for compiling. While trying to use the React DevTools extension, I encountered issues with getting debug source info (_debugInfo), particularly with server-side components. The extension works well with other frameworks and build tools (e.g., Webpack + Babel, Vite, CRA..), but similar configurations with Next.js did not produce the desired results.

This is the .swcrc I've used:

{
  "jsc": {
    "target": "es2021",
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": true,
        "refresh": true
      }
    }
  },
  "sourceMaps": true,
  "minify": false
}

This is the nextjs.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, { dev }) {
    config.mode = 'development';
    config.devtool = 'source-map'; // nextjs automatically converts this to eval-source-map
    return config;
  },
  reactStrictMode: true,
  swcMinify: false,
  productionBrowserSourceMaps: true,
};
module.exports = nextConfig;

Proposal

I propose adding support for exposing _debugInfo in development mode when using SWC with Next.js, maybe by adding an SWC plugin or a configuration to SWC/nextjs.