찾다

집  >  Q&A  >  본문

Devtools에서 Remix의 인디 스택을 사용하여 프로젝트를 초기화할 때 "수화 실패" 오류가 발생하는 이유는 무엇입니까?

<p>Remix를 배울 때 튜토리얼에 따라 프로젝트를 초기화했는데 Devtools를 실행해보니 콘솔에 여러 가지 오류가 보고되는 것을 발견했습니다. </p><p> <code>경고: <html> 내에 <div> 태그가 포함된 서버 HTML은 필요하지 않습니다. </code></p><p> <code>오류: 초기 UI가 서버에서 렌더링된 것과 일치하지 않아 하이드레이션에 실패했습니다. *n

가장 우스꽝스러운 점은 리믹스 홈페이지를 열었는데, 리믹스 홈페이지에도 같은 오류가 보고되어 있어서 하이드레이션이 성공했는지, 왜 이런 오류가 발생했는지 특히 궁금했습니다. </p>

P粉476475551P粉476475551489일 전519

모든 응답(1)나는 대답할 것이다

  • P粉043566314

    P粉0435663142023-08-30 17:16:14

    이것은 DOM을 수정하는 브라우저 확장으로 인해 발생하는 잘 알려진 React 문제입니다.

    은 전체 를 렌더링하기 때문에 Remix에서 더 분명합니다 <html />，而不仅仅是<div id="root" />.

    확장 프로그램이 설치되지 않은 상태(또는 시크릿 모드)의 브라우저 프로필을 사용하여 브라우저 확장 프로그램이 문제를 일으키는지 확인할 수 있습니다.

    Kiliman은 여기에서 해결 방법을 보여줍니다: https://github.com/kiliman/remix-hydration-fix. 여기에는 헤더와 애플리케이션을 별도로 렌더링하는 작업이 포함됩니다.

    회신하다
    0
  • 취소회신하다