Update Next.js docs #77
Description
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 (
<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: #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!