Bug Report: Import Alias Issue with Contentlayer in Next.js + Turbopack

[mageshyt]

After upgrading to the latest version of Next.js and enabling Turbopack, I am facing an import alias issue related to Contentlayer. The error occurs when trying to import contentlayer/generated inside a page component.

Error Message

Module not found: Can't resolve 'contentlayer/generated'

Full error:

Steps to Reproduce

1. Upgrade to the latest Next.js version with Turbopack enabled.
2. Use @/.contentlayer/generated in an import statement.
3. Run next dev or next build.
4. Encounter the import alias resolution issue.

Expected Behavior
The alias @/.contentlayer/generated should resolve correctly without errors.

Current Workaround (Not Working)
I attempted to fix this by modifying my next.config.js as follows:

turbo: {
  root: "./",
  resolveAlias: {
    "contentlayer/generated": "./.contentlayer/generated",
  },
  resolveExtensions: [".mdx", ".tsx", ".ts", ".jsx", ".js", ".json"],
}

Despite this, the issue persists.

Configuration Details

• tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
      "contentlayer/generated": ["./.contentlayer/generated"]
    }
  },
  "include": [".contentlayer/generated"]
}

• next.config.js

import { withContentlayer } from "next-contentlayer";
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        "contentlayer/generated": "./.contentlayer/generated",
      }
    }
  }
};
export default withContentlayer(nextConfig);

System Info

• Next.js Version: 15.2.4
• Node.js Version: 21.4.0
• Operating System:mac os

Additional Context

• The issue seems to be related to Turbopack's module resolution.
• It works fine with Webpack, but breaks with Turbopack.
• contentlayer is properly generated inside .contentlayer/generated.

Would appreciate any guidance on fixing this!

[timlrx]

The issue is that the next-contentlayer plugin runs before the webpack process. We probably need to add a beforeCompile hook to run contentlayer if turbopack is used. Something similar to the following:

contentlayer2/packages/next-contentlayer/src/index.ts

Line 85 in 2a0405c

compiler.hooks.beforeCompile.tapPromise('ContentlayerWebpackPlugin', async () => {

To verify, you could run it manually with npx contentlayer2 build before running next dev. I don't think the additional resolveAlias config is required.

Happy to accept a PR if someone has the capacity to look into next.js internals and figure out what is a good way to hook on either webpack or turborepo build process.

[mordamax]

@timlrx we are having the same issue, only locally.
Adding extra step before next dev or running this manually unfortunatelly didn't solve the problem

[fawzy0z]

i got the same problem and i already solved it

you just can add npm i -D npm-run-all to your devDependencies and then add those scripts
1- "dev:contentlayer": "contentlayer2 dev"
2- "dev:next": "next dev --turbopack"

3- edit the main dev script with this "dev": "run-p dev:*"

4- contentlayer.config.ts will be

export const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.md`,
  fields: {
    title: { type: "string", required: true },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (post) => `/posts/${post._raw.flattenedPath}`,
    },
  },
}))

export default makeSource({ contentDirPath: "posts", documentTypes: [Post] }) 

5- in posts directory create 'post-01.md'

---
title: My First Post
---

happy to post my first post

6- in root page.tsx put

import { allPosts, Post } from "@/.contentlayer/generated";
import Link from "next/link";

function PostCard(post: Post) {
  return (
    <div className="mb-8">
      <h2 className="mb-1 text-xl">
        <Link
          href={post.url}
          className="text-blue-700 hover:text-blue-900 dark:text-blue-400"
        >
          {post.title}
        </Link>
      </h2>
      <div
        className="text-sm [&>*]:mb-3 [&>*:last-child]:mb-0"
        dangerouslySetInnerHTML={{ __html: post.body.html }}
      />
    </div>
  );
}

export default function Home() {
  const posts = allPosts;

  return (
    <div className="mx-auto max-w-xl py-8">
      <h1 className="mb-8 text-center text-2xl font-black">
        Next.js + Contentlayer Example
      </h1>
      {posts.map((post, idx) => (
        <PostCard key={idx} {...post} />
      ))}
    </div>
  );
}

it worked with me without any problem

and it will work with turbopack and the contentlayer

and here is a video you can watch it while i doing the previous steps to number 3
https://vt.tiktok.com/ZSkuAvo3G/