react 에서 외부 스크립트를 사용하려는데 문제가 있어요

Question

목표우선 제가 사용하려고 하는 외부 스크립트는 이거에요 https://github.com/freearhey/phash-js아래와 같은 방법으로 불러와서 get_phash() 함수를 정의 할 수 있고 정상적으로 작동하는데요, 이 get_phash() 함수를 리액트 컴포넌트에서 정의하고 사용하는 게 목표에요 가능하다면 https://cdn.jsdelivr.net/npm/phash-js/dist/phash.js 에서 가져오지 말고 phash.js를 작업폴더 내부에 저장해두고 불러오고 싶어요 제가 이 함수로 만드려는 건 사이트에서 img 태그 요소들을 찾아 유사한 그것과 유사한 이미지가 있는지 찾아내는 구글 확장프로그램이에요시도한 것들그래서 일단 리액트 앱을 생성한 뒤에 해당 라이브러리를 npm 에서 찾아 설치하고 import pHash from 'phash-js';APP.JS 에서 다음과 같이 코드를 작성해 봤어요import './App.css'; import React, { useEffect } from 'react'; import pHash from 'phash-js'; function App(){ function get_phash(file) { pHash.hash(file).then(hash => { console.log(hash.value) }) } return(

); } export default App; 이렇게 하니까 이런 오류가 출력되더라고요ERROR in ./node_modules/source-map/lib/read-wasm.js 22:13-26Module not found: Error: Can't resolve 'fs' in 'C:\protection_dev\web_protection ode_modules\source-map\lib'Can't resolve 'fs' 오류는 서버에서 실행되어야 하는 nodejs 모듈이 클라이언트 단에서 실행되었기 때문이라고 하는데 맨 처음의 코드 처럼 단순 html 파일로 작성하면 클라이언트 단에서 작동하니까 이건 아닌거 같고 모듈이 꼬인 걸수도 있다고 해서 source-map을 재 설치해 봐도 변화가 없더라고요 그래서 다른 방법으로 외부 스크립트를 불러오려고index.html 에서 를 지우고 대신 를 입력한 뒤에APP.JS 에서 아래와 같이 코드를 작성해 봤어요 import './App.css'; import React, { useEffect } from 'react'; function App(){ function get_phash(file) { Window.pHash.hash(file).then(hash => { console.log(hash.value) }) } function Img_e_To_File(img_e){ // img 태그 요소의 src 이미지를 파일 객체로 변환 시키는 함수 fetch(img_e.src) .then(res => res.blob()) .then(blob => { const file = new File([blob], 'dot.png', blob) return file; }) } useEffect(()=>{ let x = Img_e_To_File(document.getElementById("a")); let y = get_phash(x); },[]) return(

); } export default App;아래와 같은 런타임 오류가 발생하더라고요Cannot read properties of undefined (reading 'hash') TypeError: Cannot read properties of undefined (reading 'hash') at get_phash (http://localhost:3000/static/js/bundle.js:32:18) at http://localhost:3000/static/js/bundle.js:44:13 at react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:17796:18) at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:6279:14) at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:11393:618) at commitHookPassiveMountEffects (http://localhost:3000/static/js/bundle.js:11430:56) at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:12337:25) at recursivelyTraversePassiveMountEffects (http://localhost:3000/static/js/bundle.js:12328:104) at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:12370:9) at recursivelyTraversePassiveMountEffects (http://localhost:3000/static/js/bundle.js:12328:104)ERRORCannot read properties of undefined (reading 'hash') TypeError: Cannot read properties of undefined (reading 'hash') at get_phash (http://localhost:3000/static/js/bundle.js:32:18) at http://localhost:3000/static/js/bundle.js:44:13 at react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:17796:18) at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:6279:14) at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:11393:618) at commitHookPassiveMountEffects (http://localhost:3000/static/js/bundle.js:11430:56) at reconnectPassiveEffects (http://localhost:3000/static/js/bundle.js:12384:9) at recursivelyTraverseReconnectPassiveEffects (http://localhost:3000/static/js/bundle.js:12375:66) at reconnectPassiveEffects (http://localhost:3000/static/js/bundle.js:12398:9) at doubleInvokeEffectsOnFiber (http://localhost:3000/static/js/bundle.js:13835:199)혹시 pHash에 있는 hash()를 불러오기 전에 너무 빨리 호출되었나 싶어서 setTimeout 으로 2초 뒤에 get_phash()가 호출되게 해봤을때 이런 런타임 오류가 발생하고요 Cannot read properties of undefined (reading 'hash') TypeError: Cannot read properties of undefined (reading 'hash') at get_phash (http://localhost:3000/static/js/bundle.js:32:18) at http://localhost:3000/static/js/bundle.js:45:15ERRORCannot read properties of undefined (reading 'hash') TypeError: Cannot read properties of undefined (reading 'hash') at get_phash (http://localhost:3000/static/js/bundle.js:32:18) at http://localhost:3000/static/js/bundle.js:45:15pHash에 있는 hash()를 찾지 못하는 이유가 뭔지, 어떻게 해결해야 하는지 모르겠어요

dmm11 · Accepted Answer

Window.pHash 말고 window로 해보시겠어요 아니면 그냥 pHash 로요Window는 생성자 함수이고 전역 객체인 window로 하셔야합니다

react 에서 외부 스크립트를 사용하려는데 문제가 있어요

1개의 답변

Q&A 목록