NextJS + ChakraUI Blog With next-mdx-remote (2 of 2)

[@lucacespedes9494]

hy, can anyone help me with this error "href Interpolation Failed"

[@julioagustinmayorga2084]

Hi ben i really liked your videos!! thanks for that. I would like it a lot if you made a video on how to link the blog with a Headless CMS like GraphCMS or contentful

[@roosterfloss758]

Hey just wanted to add a comment for others to see if they have issues not being able to get their formatting working with the markdown on the latest version of the libraries since you will run into some issues if this is the case
As previously stated by others:
-Replace import renderToString from 'next-mdx-remote/render-to-string' with import { serialize } from 'next-mdx-remote/serialize'
-Replace import hydrate from 'next-mdx-remote/hydrate' with import { MDXRemote } from 'next-mdx-remote'
You also need to update your [slug].js Blog function so that the formatting will work correctly with the breaking changes made for MDX remote
export default function Blog({ mdxSource, frontMatter }) {
return (



);
}
You also need to add:
/** @jsxRuntime classic /
import React from 'react'
At the top of MDXComponents.js
You should be able to see the headings and titles :)
Thanks Benjamin for this series, it was extremely helpful

[@tho_norlha]

hello, I did all your steps but I spent 3 days trying to figure out but still can't, as soon as I click on one article, this error shows up :
Did you have an error like this ?
./node_modules/next-mdx-remote/dist/index.js:2:0
Module not found: Package path ./jsx-runtime.js is not exported from package
C:\Users\omman\thosam_personal_blog
ode_modules
eact (see exports field
in C:\Users\omman\thosam_personal_blog
ode_modules
eact\package.json)
Import trace for requested module:
./node_modules/next-mdx-remote/index.js
./pages/blog/[slug].js
nextjs.org/docs/messages/module-not-found
----------
/** @jsxRuntime classic */
/** @jsx jsx */
import React from 'react'
import {
Box,
Alert,
Code,
Heading,
Link,
Text,
Divider,
useColorMode
} from '@chakra-ui/react';
import { jsx } from '@emotion/react'
import NextLink from 'next/link'
-> this is what i have at the top of MDXComponents.js
my github link : github.com/Thosam1/thosam_personal_blog

[@tho_norlha]

Edit : delete yarn.lock and node_modules folder, then go to package.json and change
"react": "17.0.2",
"react-dom": "17.0.2",

[@abdulrafay1951]

next-mdx-remote has update its code and many functions aren't working!

[@BenjaminCarlson]

hmmm, it still works on my website - benjamincarlson.io What functions specifically?

[@japface]

@@BenjaminCarlson I'm also getting an error with renderToString. "Module not found: Can't resolve 'next-mdx-remote/render-to-string'" despite the fact that I have that module installed. Same goes with next-mdx-remote/hydrate as well. I also deleted node_modules and .next and ran yarn again to see if that would help but it didn't.

[@7taztoons]

@@japface You just need to downgrade mdx version :)

[@BenjaminCarlson]

Yes, make sure the versions match up with the ones in the video! With open source software (like mdx) new updates can have breaking effects so it's best to not install the latest version.

[@japface]

@@BenjaminCarlson OK reverting worked. Also, your newer next.js / mdx crash course video is using different packages. Would you say those are simpler to implement, better, and could serve the same function as what you're using in this tutorial?

[@quiverbird118]

This is some expert stuff, you should do Udemy courses.
If you were to deploy this to Vercel, would you need a separate service aside from that, to serve the blog post images or does Vercel handle that ? But it does look like you'd be good just on Vercel, since on their deployment docs it says:
"Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from Vercel's Edge Network, which is blazingly fast."
And if you were able to use Vercel for everything, do you think that the code in mdx.js would work pretty seamlessly, such as const root = process.cwd();
and the getFileBySlug() etc ?

[@BenjaminCarlson]

Thanks! As for your question: as long as the images are in your public folder you don't need a separate service. The blog posts, css, images, etc will all be loaded correctly with Vercel. I will be deploying this exact website in a future video as well.