ericclemmons / ericclemmons/click-to-component
Update Next.js docs
- Dominant language
- JavaScript
- Stars
- 2.4k
- Forks
- 113
- PR merge metrics
- No merged PRs in 30d
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](https://nextjs.org/docs/app).
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 (
{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 / >
{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!
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.