ericclemmons / ericclemmons/click-to-component

Update Next.js docs

Open
#77 3 comments 2 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.