클라이언트 라이브러리를 가져올 때 ReferenceError: self is not Defined가 발생하는 이유는 무엇입니까?

Question

이전에 한 번도 받은 적이 없는 오류 메시지를 극복할 수 없어서 Next.js에서 xterm React 구성 요소를 생성하는 동안 막혔습니다.

xterm이라는 npm 클라이언트 모듈을 가져오려고 하는데 가져오기 라인을 추가하면 앱이 충돌합니다.

으아악

읽는 중 오류 발생 服务器错误... ReferenceError: self is not Defined 그런 다음 이 코드를 Source

로 표시하세요. 으아악

제가 조사한 바에 따르면 이는 Webpack과 관련이 있으며 다음과 같은 작업이 수행되면 도움이 될 수 있습니다.

으아악

이 문제를 해결하는 방법을 알고 있나요?

Answer 1

이 오류가 발생하는 이유는 라이브러리가 작동하려면 Web API가 필요하고 Next.js가 서버 측에서 페이지를 미리 렌더링할 때 발생하기 때문입니다.

귀하의 경우 xterm 尝试访问服务器上不存在的window 对象。解决方案是避免在服务器上加载 xterm 클라이언트 측에만 로드되도록 동적으로 가져옵니다.

Next.js에는 이를 달성하는 여러 가지 방법이 있습니다.

---

1위 useEffect 内使用动态 import()

Replace import 移至组件的 useEffect 그런 다음 라이브러리를 동적으로 가져오고 그 안에 로직을 추가합니다.

으아악

---

#2 next/dynamic 与 ssr: false 함께 사용

컴포넌트를 생성하고 xterm 로직을 추가하세요.

으아악

그런 다음 사용 시 구성 요소를 동적으로 가져옵니다.

으아악

대안으로, next/dynamic동적 가져오기 라이브러리를 사용할 때 추가 파일 생성을 방지하기 위해 직접 논리를 추가할 수 있습니다.

으아악