From 9743da0167a409fdd734551893d0fbfd862f306f Mon Sep 17 00:00:00 2001
From: Chinmay Mhatre <chinmaymhatre12@gmail.com>
Date: Fri, 24 Apr 2026 14:12:42 +0530
Subject: [PATCH] fix: resolve Next.js 16 Turbopack conflict in learn and
 ui-library (#45205)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?
The apps/learn and apps/ui-library applications fail to start in
development mode (pnpm dev) and during production builds. This is caused
by a conflict between Next.js 16, which enables Turbopack by default,
and the Contentlayer plugin, which injects a custom Webpack
configuration.

Error: ⨯ ERROR: This build is using Turbopack, with a webpack config and
no turbopack config.

## What is the new behavior?
This PR adds the required turbopack configuration block to the
next.config.mjs files for both apps/learn and apps/ui-library.

It explicitly enables Turbopack while providing the raw-loader rules for
*.md files. This ensures that Contentlayer can correctly process
Markdown content under Turbopack.

Reference: This fix follows the established pattern used in the Design
System
[#39890](https://github.com/supabase/supabase/pull/39890/changes#diff-07283a8ef455ee1c6769cb991039300209d540dd727e3434b070d03075ced551)
and Studio to handle the Contentlayer/Turbopack conflict.

<img width="1429" height="856" alt="image"
src="https://github.com/user-attachments/assets/253ad0da-6420-441b-874c-3394b21b9ae5"
/>

---

## Additional context
Verified that `pnpm dev` starts successfully for both apps after the
change.
Verified that `pnpm build` completes successfully using the Turbopack
engine.

<img width="1429" height="856" alt="image"
src="https://github.com/user-attachments/assets/11efbd5c-57c5-425a-baca-f0198d0e7d91"
/>
<img width="1429" height="856" alt="image"
src="https://github.com/user-attachments/assets/17ec4f25-c19e-4f6b-bcc6-d898b7b20815"
/>


System: macOS | Node: v24.13.1 | Next.js: 16.2.3


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Chores**
* Updated build configuration to optimize Markdown file processing in
the application build system across multiple packages.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/learn/next.config.mjs      | 8 ++++++++
 apps/ui-library/next.config.mjs | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/apps/learn/next.config.mjs b/apps/learn/next.config.mjs
index 44a9a34c9ec..2db2c7f20f9 100644
--- a/apps/learn/next.config.mjs
+++ b/apps/learn/next.config.mjs
@@ -4,6 +4,14 @@ import { withContentlayer } from 'next-contentlayer2'
 const nextConfig = {
   transpilePackages: ['ui', 'common', 'shared-data', 'icons', 'tsconfig'],
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  turbopack: {
+    rules: {
+      '*.md': {
+        loaders: ['raw-loader'],
+        as: '*.js',
+      },
+    },
+  },
   async redirects() {
     return [
       ...(process.env.NEXT_PUBLIC_BASE_PATH?.length
diff --git a/apps/ui-library/next.config.mjs b/apps/ui-library/next.config.mjs
index 412f0de78b4..597f4432bea 100644
--- a/apps/ui-library/next.config.mjs
+++ b/apps/ui-library/next.config.mjs
@@ -4,6 +4,14 @@ import { withContentlayer } from 'next-contentlayer2'
 const nextConfig = {
   transpilePackages: ['ui', 'common', 'shared-data', 'icons', 'tsconfig'],
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  turbopack: {
+    rules: {
+      '*.md': {
+        loaders: ['raw-loader'],
+        as: '*.js',
+      },
+    },
+  },
   async redirects() {
     return [
       ...(process.env.NEXT_PUBLIC_BASE_PATH?.length