How to implement this with a T3 app?

[SwiftedMind]

Hey,

I'm totally new to web dev (I'm an iOS developer) and I'm currently trying to build a website. I used T3 (https://create.t3.gg) to create a next.js project and now I'm trying to implement Code Hike (which looks totally awesome, btw). However, following the installation guide (https://codehike.org/docs/installation/nextjs) leads to an error.

This is what my next.config.mjs looks like:

/**  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.  * This is especially useful for Docker builds.  */ !process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs")); /** @type {import("next").NextConfig} */ const config = { reactStrictMode: true, /**  * If you have the "experimental: { appDir: true }" setting enabled, then you  * must comment the below `i18n` config out.  *  * @see https://github.com/vercel/next.js/issues/41980  */ i18n: { locales: ["en"], defaultLocale: "en", }, }; export default config; const theme = import("shiki/themes/nord.json") const { remarkCodeHike } = require("@code-hike/mdx") const withMDX = require("@next/mdx")({ extension: /\.mdx?$/, options: { remarkPlugins: [ [remarkCodeHike, { theme }] ], }, }) module.exports = withMDX({ pageExtensions: [ "ts", "tsx", "js", "jsx", "md", "mdx" ], })

When I run npm run dev, I get this error:

error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: require is not defined in ES module scope, you can use import instead
at file:///Users/dennis/Code/swiftedmind.com/swifted-mind-website/next.config.mjs:25:28

Line 25 is const { remarkCodeHike } = require("@code-hike/mdx")

Replacing require with import does not change anything, however.

Does anybody know what's going on here? I'd really appreciate any help. Let me know if you need more information :)

[pomber]

Hi, thanks.

The difference with the guide is that you are using a .mjs config. You need to use import

import { remarkCodeHike } from "@code-hike/mdx"

(note that it's import from and not equals, like in your example).

The theme may be trickier to import because it's a json file. I think this should work with next.js:

import theme from "shiki/themes/nord.json" assert { type: "json" }

[SwiftedMind]

Thanks!

The import does now work, but it seems like it can't parse the test .mdx file:

error - ./src/pages/test.mdx
Module parse failed: Unexpected character ' ' (1:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

(I have no idea what character it is referring to. The first line is just # Headline)

I'm not sure I formatted and exported the mdxConfig correctly. It does compile, at least, but it doesn't quite work:

/**  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.  * This is especially useful for Docker builds.  */ !process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs")); /** @type {import("next").NextConfig} */ const config = { pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], reactStrictMode: true, /**  * If you have the "experimental: { appDir: true }" setting enabled, then you  * must comment the below `i18n` config out.  *  * @see https://github.com/vercel/next.js/issues/41980  */ i18n: { locales: ["en"], defaultLocale: "en", }, }; import theme from "shiki/themes/nord.json" assert { type: "json" } import { remarkCodeHike } from "@code-hike/mdx" import withMDX from '@next/mdx'; const mdxConfig = withMDX({ extension: /\.mdx?$/, options: { remarkPlugins: [ [remarkCodeHike, { theme }] ], }, }) const mergedConfig = { ...config, ...mdxConfig, }; export default mergedConfig;

[pomber]

I think you have two errors in the config.

• Instead of importing withMdx import something like addMdx and then initialize withMDX like before
• don't merge the configs, pass your original config to the withMDX function.

import addMdx from '@next/mdx'; const withMDX = addMdx({ extension: /\.mdx?$/, options: { remarkPlugins: [ [remarkCodeHike, { theme }] ], }, }) export default withMDX(yourConfig) 

[SwiftedMind]

Ah, now it's working I think. With the two changes you suggested I got one more error saying that a file mdx-components.jsx was missing. I added it to the root of the project with the following contents:

// A template I got from here: https://beta.nextjs.org/docs/guides/mdx#getting-started function H1({ children }) { // ... } function H2({ children }) { // ... } export function useMDXComponents(components) { return { ...components }; }

And now it's working! At least the code blocks. The rest of the markdown doesn't do anything (it's not formatting it) but I guess that is an MDX configuration thing, and has nothing to do with Code Hike. So I guess, I'll have to go through that documentation next 😄

Thanks a lot for your help! :)

[pomber]

The rest of the markdown doesn't do anything (it's not formatting it)

it's probably tailwind resetting the styles, try to find a blog template using a similar stack (next + tailwind + mdx) to use as a guide

[SwiftedMind]

Ah okay, that makes sense. I did a quick H1 styling in the global.css and it works. Awesome! :D
Then I'm going to have a look at few tutorials/templates for this stack. Again, thanks a lot!