Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Next.js docs #77

Open
spacecat opened this issue Nov 27, 2023 · 3 comments
Open

Update Next.js docs #77

spacecat opened this issue Nov 27, 2023 · 3 comments

Comments

@spacecat
Copy link

spacecat commented Nov 27, 2023 •
edited
Loading

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 (

<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:

  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
Copy link

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

@spacecat
Copy link
Author

spacecat commented Dec 6, 2023

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
Copy link

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+

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@spacecat @codiku-dev