Do you support Nextjs and SWC?

[givo]

Hey zthxxx!

First, thank you for the fantastic tool! It has been incredibly useful in my projects.

I'm currently working on a Next.js project that uses SWC for compiling - https://github.com/vercel/next-learn/tree/main/dashboard/final-example, and I've been trying to get react-dev-inspector to work with it. The extension works well with most frameworks, but I'm facing issues when trying to use it with Next.js, especially with server-side components.

I don't want to use babel like in your example in https://github.com/zthxxx/react-dev-inspector/tree/dev/examples/nextjs-custom-server because SWC is much faster but I also afraid that nextjs won't support babel for much longer.

I tried many things to make it work, like configuring next.config.js and .swcrc but nothing worked. Nothing seems to make nextjs + SWC to expose _debugInfo that your extension needs.

.swcrc:

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

next.config.js:

/** @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;

• Do you support nextjs with SWC?
• Is it even possible to get source code of SSR components?

tnx

[zthxxx]

It supports Next.js with SWC. Configs like your .swcrc are fine. (example in Next.js demo has enabled forceSwcTransforms)

But I haven’t tested server-side components yet. Currently, I think it wrong with supporting server-side components due to Next.js don't eject jsx-source for server-side components for hydrate.

[givo]

Ok, so I tried adding forceSwcTransforms like this:

/** @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,
  experimental: {
    forceSwcTransforms: true,
  },
};

module.exports = nextConfig;

It didn't work. I also don't see _debugInfo in client side components

[zthxxx]

https://stackblitz.com/edit/stackblitz-starters-fgrlqx?file=next.config.js

[givo]

So I've set forceSwcTransforms: true in the nextjs dashboard project and this is what I get on a client side component:

There are very few client side component in this project, and in addition, when I inspect a client side component I only get the line of the component function like the following:

24 export default function NavLinks() {
25   const pathname = usePathname();
26
27   return (
28     <>
29       {links.map((link) => {
30         const LinkIcon = link.icon;
31          return (

• I don't get the line number of the inspected HTML element like in your example.
• By the way, I still don't see _debugInfo or _debugSource in fiber nodes

[zthxxx]

I think here is the source code position of your react tsx file. (but I don't know what the ?55e5 is)

[tianyingchun]

it this support app-router for next.js?