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!