search

ericclemmons / click-to-component

Option+Click React components in your browser to instantly open the source in VS Code
MIT License
1.79k stars 63 forks source link

Update Next.js docs #77

Open spacecat opened 7 months ago

spacecat commented 7 months ago

The installation and configuration section in the docs is missing how to configure this plugin if you're using Next.js 14 and the new App Router.

I got it to work partially by doing the following:

  1. npm install click-to-react-component -D -E
  2. In my app/layout.tsx:

`import type { Metadata } from "next"; import { GeistSans } from "geist/font/sans"; import { GeistMono } from "geist/font/mono"; import { Providers } from "./providers";

import "./styles/globals.css";

export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", };

export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" className="h-full bg-skin-app-background" suppressHydrationWarning

<body className={h-full font-sans antialiased`}

{children}

); } `

Then in my app/providers.tsx:

`// @ts-nocheck "use client";

import { ClickToComponent } from "click-to-react-component"; import { ThemeProvider } from "next-themes";

export function Providers({ children }) { return ( <> < ClickToComponent / > <ThemeProvider attribute="class" themes={["light", "dark", "swiss", "neon"]}

{children} < / ThemeProvider > </> ); }`

This works partially. For some component selections I get the following error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'columnNumber')

Call Stack
getPathToSource
node_modules/click-to-react-component/src/getPathToSource.js (14:0)
handleClick
node_modules/click-to-react-component/src/ClickToComponent.js (44:36)

which is already mentioned here: https://github.com/ericclemmons/click-to-component/issues/70

Out of curiosity I've got a couple of questions:

  1. Does this feature exist natively in the official react tools?
  2. If not, why? I'm sure you've delved into this question.
  3. I know of https://github.com/zthxxx/react-dev-inspector. Are there any other alternatives except click-to-react-component and react-dev-inspector that you know of?
  4. I would rather install click-to-react-component in devDependencies in package.json; will this break something or will it work just as fine as if I would install it under dependencies?

Just trying to learn as much as possible about these types of tooling.

Thanks!

codiku-dev commented 7 months ago

Probably an issue in the issue description because we don't see where you use : ClickToComponent

spacecat commented 7 months ago

Probably an issue in the issue description because we don't see where you use : ClickToComponent

@codiku-dev hmm, can't get markdown to work with my snippet. I added some spaces. You should be able to read the entire block now.

codiku-dev commented 7 months ago

Ah great thx, I guessed it was that. but for me it end up on 'column errors' or 'source not found' errors. When I click on components. Seems like it's kind of only working on some client components. I am not sure it's ready for next 13+