click-to-component
click-to-component copied to clipboard
ericclemmons
Update Next.js docs
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:
-
npm install click-to-react-component -D -E - 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} > <Providers>{children}</Providers> </body> </html> ); }
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:
- Does this feature exist natively in the official react tools?
- If not, why? I'm sure you've delved into this question.
- 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?
- I would rather install click-to-react-component in
devDependenciesin package.json; will this break something or will it work just as fine as if I would install it underdependencies?
Just trying to learn as much as possible about these types of tooling.
Thanks!
Probably an issue in the issue description because we don't see where you use : ClickToComponent
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.
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+