MDX와 KaTeX 충돌

[raonsol]

마크다운 파일에 Katex 구문이 들어갔을 경우 다음과 같은 오류가 발생.

`Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError:
/Users/raonsol/gatsby-starter-raonsol/contents/posts/writing-guide/index.md: Invalid
left-hand side in prefix operation. (1:2)

1 | ---
| ^
2 | title: "🤔 작성 가이드"`

[raonsol]

반드시 플러그인 버전이 각각 remark-math@3.0.1과 rehype-katex@5.0.0이어야 구문이 존재하지 않더라도 제대로 컴파일이 된다.
gatsbyjs/gatsby#21866 (comment)

[raonsol]

중괄호 {}안의 내용물이 string이 아니라 변수로 넘어감.

$$
S_n = \frac{n}{2}
$$

다음과 같이 입력했을 때 다음의 오류 발생.

Error in function _createMdxContent in ./contents/posts/writing-guide/index.mdx:165
n is not defined

./contents/posts/writing-guide/index.mdx:165
Open in Editor
  163 |       __html: "<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"
  164 |     }
> 165 |   })), "블럭 모드"), "\n", React.createElement(_components.p, null, "$$\nS_n = \\frac", n, 2, "\n$$"), "\n", React.createElement(_components.h3, {
      |                       ^
  166 |     id: "2-3-gfmgithub-flavored-markdown",
  167 |     style: {
  168 |       position: "relative"

[raonsol]

katex.min.css가 head에 제대로 include되지 않은 것을 발견. gatsby-browser.js가 제대로 동작하지 않는 것 같아 보인다. 문제의 원인일 수 있음.

[ingyer-ks]

안녕하세요?
gatsbyjs/gatsby#21866 (comment) 와 같이 katex.min.css를 gatsby-browser.js 대신 gatsby-ssr.js에서 아래와 같이 로드해보니 잘 되더라구요.

const HeadComponents = [
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
    crossorigin="anonymous"
  ></link>
]

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents(HeadComponents)
}

도움이 되면 좋겠습니다.
감사합니다.

[raonsol]

이 글에 나와있는 대로 해서 해결

• remark-math와 rehype-katex 삭제
• gatsby-remark-katex만 gatsby-config.js의 gatsbyRemarkPlugins 항목에 추가

468e4d9 커밋으로 해결.