useClipboard hook 사용 시 Image 관련 에러가 발생하는 이슈

[suhyeoonn]

이슈 내용

• Next.js에서 useClipboard hook 사용 시 아래와 같은 에러가 발생합니다.
• text 복사 기능 자체에는 문제가 없으며, 해당 훅의 copyImg 와 연관이 있을 것이라고 추측되나 정확한 원인은 파악 전입니다.

  ⨯ ReferenceError: Image is not defined
  at __webpack_require__ (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at __webpack_require__ (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at __webpack_require__ (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at __webpack_require__ (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at __webpack_require__ (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at eval (./src/components/CodeViewer.tsx:18:94)
  at (ssr)/./src/components/CodeViewer.tsx (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/app/(main)/page.js:195:1)
  at __webpack_require__ (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at eval (page.tsx:12:80)
  at (ssr)/./src/app/(main)/page.tsx (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/app/(main)/page.js:140:1)
  at Object.__webpack_require__ [as require] (/Users/parksuhyeon/Projects/ui-chart-helper/.next/server/webpack-runtime.js:33:43)
  at JSON.parse (<anonymous>)

사용 예시

"use client";
import React, { useContext, useEffect, useState } from "react";
// ...
import { useClipboard } from "@frontend-opensource/use-react-hooks";

const CodeViewer = () => {
  const { formData } = useContext(ChartContext)!;

  const [codeString, setCodeString] = useState("");
  // ...
  const { copied, copyText } = useClipboard({ resetTime: 1000 });

  return (
    <Card className="flex-1">
      <CardHeader>
        <CardTitle>React Code</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="relative">
          <Button
            variant="ghost"
            size="sm"
            className="absolute top-0 z-10 right-0 m-2 shadow-md bg-[#ffc107] hover:bg-[#c89706]"
            onClick={() => copyText(codeString)}
          >
            {copied ? <Check size={16} /> : <ClipboardIcon size={16} />}
          </Button>

          <SyntaxHighlighter language="jsx" style={dark} className="rounded-md">
            {codeString}
          </SyntaxHighlighter>
        </div>
      </CardContent>
    </Card>
  );
};

export default CodeViewer;

[bicochan]

@suhyeoonn 혹시 테스트하신 코드가 있는 저장소 공유가 가능하실까요? 동일한 환경에서 테스트해보려고 했는데 재현이 잘 안 되어서 요청드립니다!

테스트 환경

• Next.js
• Client Component

[suhyeoonn]

@bicochan https://github.com/ui-helper/ui-chart-helper/tree/useClipboard-error 여기입니다~! useClipboard-error 브랜치이고 이 소스코드 받아서 빌드해보시면 에러 확인하실 수 있어요!

node version: v20.17.0

[suhyeoonn]

93 이슈와 관련 있어 보여 다시 확인해 보겠습니다!