search

ericclemmons / click-to-component

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

Update Next.js docs #77

Open spacecat opened 11 months ago

spacecat commented 11 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 11 months ago

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

spacecat commented 11 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 11 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+