NextJS와 함께 Codemirror를 사용할 때 "네비게이터가 정의되지 않음"수정
5083 단어 bugfixreactcodemirrornextjs
사용자가 페이지를 새로 고치지 않거나 CodeMirror를 모두 제거하지 않기를 바라는 대신 문제를 해결할 수 있습니다. 방법은 다음과 같습니다.
시작하기 전에 react-codemirror 및 codemirror가 설치되어 있는지 확인하십시오. 그렇지 않은 경우 터미널 내에 다음을 복사하여 붙여넣으십시오.
// if you have npm
npm i codemirror
npm i react-codemirror
//if you have yarn
yarn add codemirror
yarn add react-codemirror
동적 가져오기
먼저 동적 가져오기를 사용하여 가져오기
react-codemirror
와 원하는 테마 및 모드를 확인해야 합니다. 이렇게 하려면 다른 npm/yarn 패키지와 마찬가지로 일반적으로 NextJS에서 동적 함수를 가져옵니다.
import dynamic from 'next/dynamic'
이 함수를 가져오면 react-codemirror 및 종속 항목을 동적으로 가져올 수 있습니다. 내보낸 함수 외부에서 동적으로 가져와야 한다는 점을 명심하세요. CodeMirror라는 const를 만들고 동적 함수와 동일하게 설정합니다. 동적 함수 내에서 종속 항목(예:
import('codemirror/mode/xml/xml')
)을 가져온 다음 import('react-codemirror')
로 반환합니다. 이들을 모두 가져온 후 ssr: false
를 선언하는 함수 내에 개체를 추가합니다. 최종적으로 다음과 같아야 합니다.
const CodeMirror = dynamic(() => {
import('codemirror/mode/xml/xml')
import('codemirror/mode/javascript/javascript')
import('codemirror/mode/css/css')
import('codemirror/mode/markdown/markdown')
import('codemirror/theme/material-ocean.css')
return import('react-codemirror')
}, {ssr: false})
표현
페이지/구성 요소 내에 CodeMirror 요소를 포함하려면 먼저 대괄호로 묶어야 합니다. 그런 다음 값, 옵션 및 onChange 이벤트와 같은 다른 모든 것을 포함할 수 있습니다. 예:
{<CodeMirror
className="editor"
value={devLog}
name= "Devlog"
options={{
theme: 'mdn-like',
lineNumbers: true,
mode: 'markdown'
}}
onChange={devLog => setDevLog(devLog)}
/>}
모든 것이 올바르게 보이고 예상대로 작동하는지 확인하려면(텍스트 영역과 편집기가 두 개의 별도 위치에 있거나 여러 개의 x가 있지 않음) _app.js 파일에 다음을 포함해야 합니다.
import 'codemirror/lib/codemirror.css'
결국 귀하와 귀하의 사용자는 코드를 작성하거나 CodeMirror를 사용하여 마크다운 블로그를 작성할 수 있어야 합니다. 페이지 새로 고침에 대해 걱정할 필요 없이 오류만 표시됩니다.
Reference
이 문제에 관하여(NextJS와 함께 Codemirror를 사용할 때 "네비게이터가 정의되지 않음"수정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/glowtoad123/using-codemirror-in-nextjs-without-the-navigator-error-opi텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)