Gatsby-plugin-mdx Error

Community
,
1 

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

/workspace/layer5/src/collections/service-mesh-books/istio-up-and-running/index.mdx: Unexpected token (5:13)

  3 | import Button from "../../../reusecore/Button";
  4 | import BookComponent from "../../../sections/Community/Handbook/BookComponent";
 5 | <BookWrapper>
    |              ^

  SyntaxError: /workspace/layer5/src/collections/service-mesh-books/istio-up-and-running/index.mdx: Unexpected token (5:13)
    3 | import Button from "../../../reusecore/Button";
    4 | import BookComponent from "../../../sections/Community/Handbook/BookCompon  ent";
   5 | <BookWrapper>

Importing a jsx component is showing an error by gatsby-plugin-mdx

I have just added import BookComponent from "../../../sections/Community/Handbook/BookComponent"; in the mdx file

I was trying to render the books into 3d, present on specific pages such as Istio: Up and Running page

2

Hi @Savio.Dias, Ensure that you are using the correct syntax for rendering JSX components. It seems that the JSX syntax is not properly handled in the .mdx file. JSX should typically be enclosed within curly braces {}. it should be used as {<BookWrapper>}. Also, make sure that all the dependencies are installed correctly for gatsby-plugin-mdx and its components

3

I was facing same issue while drafting blog , I manually wrote line by line from starting to fix it :smiling_face_with_tear:.