WEB-1135: Update examples and schema for Turbopack loaders config change

docs/02-app/02-api-reference/05-next-config-js/turbo.mdx

@@ -18,9 +18,9 @@ To configure loaders, add the names of the loaders you've installed and any opti
 module.exports = {
   experimental: {
     turbo: {
-      loaders: {
+      rules: {
         // Option format
-        '.md': [
+        '*.md': [
           {
             loader: '@mdx-js/loader',
             options: {
@@ -29,7 +29,7 @@ module.exports = {
           },
         ],
         // Option-less format
-        '.mdx': ['@mdx-js/loader'],
+        '*.mdx': ['@mdx-js/loader'],
       },
     },
   },

examples/with-turbopack-loaders/next.config.js

@@ -1,8 +1,15 @@
 module.exports = {
   experimental: {
     turbo: {
-      loaders: {
-        '.svg': ['@svgr/webpack'],
+      rules: {
+        '*.react.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+        '*.styl': {
+          loaders: ['stylus-loader'],
+          as: '*.css',
+        },
       },
     },
   },

examples/with-turbopack-loaders/package.json

@@ -15,6 +15,8 @@
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
+    "stylus": "0.59.0",
+    "stylus-loader": "7.1.3",
     "typescript": "^4.9.3"
   }
 }

examples/with-turbopack-loaders/pages/index.js

@@ -1,4 +1,5 @@
-import Vercel from '../vercel.svg'
+import Vercel from '../vercel.react.svg'
+import '../styles.styl'
 
 export default function Home() {
   return <Vercel />

examples/with-turbopack-loaders/styles.styl

@@ -0,0 +1,2 @@
+body
+  background-color: blue

packages/next-swc/crates/next-core/src/next_config.rs

@@ -376,7 +376,7 @@ pub enum RemotePatternProtocal {
 #[derive(Clone, Debug, Default, PartialEq, Serialize, Deserialize, TraceRawVcs)]
 #[serde(rename_all = "camelCase")]
 pub struct ExperimentalTurboConfig {
-    /// This option has been replace by `rules`.
+    /// This option has been replaced by `rules`.
     pub loaders: Option<JsonValue>,
     pub rules: Option<IndexMap<String, RuleConfigItem>>,
     pub resolve_alias: Option<IndexMap<String, JsonValue>>,

packages/next/src/build/swc/index.ts

@@ -8,7 +8,7 @@ import { getParserOptions } from './options'
 import { eventSwcLoadFailure } from '../../telemetry/events/swc-load-failure'
 import { patchIncorrectLockfile } from '../../lib/patch-incorrect-lockfile'
 import { downloadWasmSwc, downloadNativeNextSwc } from '../../lib/download-swc'
-import { NextConfigComplete, TurboLoaderItem } from '../../server/config-shared'
+import { NextConfigComplete, TurboRule } from '../../server/config-shared'
 import { isDeepStrictEqual } from 'util'
 
 const nextVersion = process.env.__NEXT_VERSION as string
@@ -948,10 +948,8 @@ function bindingToApi(binding: any, _wasm: boolean) {
     nextConfigSerializable.exportPathMap = {}
     nextConfigSerializable.webpack = nextConfig.webpack && {}
 
-    if (nextConfig.experimental?.turbo?.loaders) {
-      ensureLoadersHaveSerializableOptions(
-        nextConfig.experimental.turbo.loaders
-      )
+    if (nextConfig.experimental?.turbo?.rules) {
+      ensureLoadersHaveSerializableOptions(nextConfig.experimental.turbo?.rules)
     }
 
     nextConfigSerializable.modularizeImports =
@@ -979,16 +977,17 @@ function bindingToApi(binding: any, _wasm: boolean) {
   }
 
   function ensureLoadersHaveSerializableOptions(
-    turbopackLoaders: Record<string, TurboLoaderItem[]>
+    turbopackRules: Record<string, TurboRule>
   ) {
-    for (const [ext, loaderItems] of Object.entries(turbopackLoaders)) {
+    for (const [glob, rule] of Object.entries(turbopackRules)) {
+      const loaderItems = Array.isArray(rule) ? rule : rule.loaders
       for (const loaderItem of loaderItems) {
         if (
           typeof loaderItem !== 'string' &&
           !isDeepStrictEqual(loaderItem, JSON.parse(JSON.stringify(loaderItem)))
         ) {
           throw new Error(
-            `loader ${loaderItem.loader} for match "${ext}" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.`
+            `loader ${loaderItem.loader} for match "${glob}" does not have serializable options. Ensure that options passed are plain JavaScript objects and values.`
           )
         }
       }

packages/next/src/server/config-schema.ts

@@ -453,6 +453,9 @@ const configSchema = {
             loaders: {
               type: 'object',
             },
+            rules: {
+              type: 'object',
+            },
             resolveAlias: {
               type: 'object',
             },

packages/next/src/server/config-shared.ts

@@ -93,6 +93,13 @@ export type TurboLoaderItem =
       options: Record<string, JSONValue>
     }
 
+export type TurboRule =
+  | TurboLoaderItem[]
+  | {
+      loaders: TurboLoaderItem[]
+      as: string
+    }
+
 export interface ExperimentalTurboOptions {
   /**
    * (`next --turbo` only) A mapping of aliased imports to modules to load in their place.
@@ -110,6 +117,13 @@ export interface ExperimentalTurboOptions {
    * @see [Turbopack Loaders](https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders)
    */
   loaders?: Record<string, TurboLoaderItem[]>
+
+  /**
+   * (`next --turbo` only) A list of webpack loaders to apply when running with Turbopack.
+   *
+   * @see [Turbopack Loaders](https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders)
+   */
+  rules?: Record<string, TurboRule>
 }
 
 export interface WebpackConfigContext {

packages/next/src/server/config.ts

@@ -12,6 +12,7 @@ import {
   NextConfigComplete,
   validateConfig,
   NextConfig,
+  TurboLoaderItem,
 } from './config-shared'
 import { loadWebpackHook } from './config-utils'
 import { ImageConfig, imageConfigDefault } from '../shared/lib/image-config'
@@ -852,6 +853,27 @@ export default async function loadConfig(
           : canonicalBase) || ''
     }
 
+    if (
+      userConfig.experimental?.turbo?.loaders &&
+      !userConfig.experimental?.turbo?.rules
+    ) {
+      curLog.warn(
+        'experimental.turbo.loaders is now deprecated. Please update next.config.js to use experimental.turbo.rules as soon as possible.\n' +
+          'The new option is similar, but the key should be a glob instead of an extension.\n' +
+          'Example: loaders: { ".mdx": ["mdx-loader"] } -> rules: { "*.mdx": ["mdx-loader"] }" }\n' +
+          'See more info here https://nextjs.org/docs/app/api-reference/next-config-js/turbo'
+      )
+
+      const rules: Record<string, TurboLoaderItem[]> = {}
+      for (const [ext, loaders] of Object.entries(
+        userConfig.experimental.turbo.loaders
+      )) {
+        rules['*' + ext] = loaders as TurboLoaderItem[]
+      }
+
+      userConfig.experimental.turbo.rules = rules
+    }
+
     onLoadUserConfig?.(userConfig)
     const completeConfig = assignDefaults(
       dir,