fix(core): Use proper swc loader options (#10605)

Author: slorber

packages/docusaurus-bundler/src/importFaster.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ConfigureWebpackUtils} from '@docusaurus/types';
 import type {
   MinimizerOptions as JsMinimizerOptions,
   CustomOptions,
@@ -34,11 +33,16 @@ export async function importRspack(): Promise<FasterModule['rspack']> {
   return faster.rspack;
 }
 
-export async function importSwcJsLoaderFactory(): Promise<
-  ConfigureWebpackUtils['getJSLoader']
+export async function importSwcLoader(): Promise<string> {
+  const faster = await ensureFaster();
+  return faster.swcLoader;
+}
+
+export async function importGetSwcLoaderOptions(): Promise<
+  FasterModule['getSwcLoaderOptions']
 > {
   const faster = await ensureFaster();
-  return faster.getSwcJsLoaderFactory;
+  return faster.getSwcLoaderOptions;
 }
 
 export async function importSwcJsMinimizerOptions(): Promise<
@@ -55,9 +59,11 @@ export async function importSwcHtmlMinifier(): Promise<
   return faster.getSwcHtmlMinifier();
 }
 
-export async function importBrowserslistQueries(): Promise<string[]> {
+export async function importGetBrowserslistQueries(): Promise<
+  FasterModule['getBrowserslistQueries']
+> {
   const faster = await ensureFaster();
-  return faster.getBrowserslistQueries();
+  return faster.getBrowserslistQueries;
 }
 
 export async function importLightningCssMinimizerOptions(): Promise<

packages/docusaurus-bundler/src/loaders/jsLoader.ts

@@ -6,7 +6,7 @@
  */
 
 import {getBabelOptions} from '@docusaurus/babel';
-import {importSwcJsLoaderFactory} from '../importFaster';
+import {importSwcLoader, importGetSwcLoaderOptions} from '../importFaster';
 import {getCurrentBundler} from '../currentBundler';
 import type {ConfigureWebpackUtils, DocusaurusConfig} from '@docusaurus/types';
 
@@ -20,24 +20,32 @@ const BabelJsLoaderFactory: ConfigureWebpackUtils['getJSLoader'] = ({
   };
 };
 
-const RspackJsLoaderFactory: ConfigureWebpackUtils['getJSLoader'] = () => {
-  return {
-    loader: 'builtin:swc-loader',
-    options: {
-      jsc: {
-        parser: {
-          syntax: 'typescript',
-          tsx: true,
-        },
-        transform: {
-          react: {
-            runtime: 'automatic',
-          },
-        },
-      },
-    },
+async function createSwcLoaderFactory(): Promise<
+  ConfigureWebpackUtils['getJSLoader']
+> {
+  const loader = await importSwcLoader();
+  const getOptions = await importGetSwcLoaderOptions();
+  return ({isServer}) => {
+    return {
+      loader,
+      options: getOptions({isServer}),
+    };
   };
-};
+}
+
+// Same as swcLoader, except we use the built-in SWC loader
+async function createRspackLoaderFactory(): Promise<
+  ConfigureWebpackUtils['getJSLoader']
+> {
+  const loader = 'builtin:swc-loader';
+  const getOptions = await importGetSwcLoaderOptions();
+  return ({isServer}) => {
+    return {
+      loader,
+      options: getOptions({isServer}),
+    };
+  };
+}
 
 // Confusing: function that creates a function that creates actual js loaders
 // This is done on purpose because the js loader factory is a public API
@@ -61,7 +69,7 @@ export async function createJsLoaderFactory({
         'When using Rspack bundler, it is required to enable swcJsLoader too',
       );
     }
-    return RspackJsLoaderFactory;
+    return createRspackLoaderFactory();
   }
   const jsLoader = siteConfig.webpack?.jsLoader ?? 'babel';
   if (
@@ -76,7 +84,7 @@ export async function createJsLoaderFactory({
     return ({isServer}) => jsLoader(isServer);
   }
   if (siteConfig.future?.experimental_faster.swcJsLoader) {
-    return importSwcJsLoaderFactory();
+    return createSwcLoaderFactory();
   }
   if (jsLoader === 'babel') {
     return BabelJsLoaderFactory;

packages/docusaurus-bundler/src/minification.ts

@@ -10,7 +10,7 @@ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import {
   importSwcJsMinimizerOptions,
   importLightningCssMinimizerOptions,
-  importBrowserslistQueries,
+  importGetBrowserslistQueries,
 } from './importFaster';
 import {getCurrentBundlerAsRspack} from './currentBundler';
 import type {CustomOptions, CssNanoOptions} from 'css-minimizer-webpack-plugin';
@@ -141,7 +141,8 @@ async function getRspackMinimizers({
   currentBundler,
 }: MinimizersConfig): Promise<WebpackPluginInstance[]> {
   const rspack = getCurrentBundlerAsRspack({currentBundler});
-  const browserslistQueries = await importBrowserslistQueries();
+  const getBrowserslistQueries = await importGetBrowserslistQueries();
+  const browserslistQueries = getBrowserslistQueries({isServer: false});
   const swcJsMinimizerOptions = await importSwcJsMinimizerOptions();
   return [
     // See https://rspack.dev/plugins/rspack/swc-js-minimizer-rspack-plugin

packages/docusaurus-faster/src/index.ts

@@ -9,40 +9,37 @@ import Rspack from '@rspack/core';
 import * as lightningcss from 'lightningcss';
 import browserslist from 'browserslist';
 import {minify as swcHtmlMinifier} from '@swc/html';
-import type {RuleSetRule} from 'webpack';
-import type {JsMinifyOptions} from '@swc/core';
+import type {JsMinifyOptions, Options as SwcOptions} from '@swc/core';
 
-export const rspack = Rspack;
-
-export function getSwcHtmlMinifier(): typeof swcHtmlMinifier {
-  return swcHtmlMinifier;
-}
+export const swcLoader = require.resolve('swc-loader');
 
-export function getSwcJsLoaderFactory({
+export const getSwcLoaderOptions = ({
   isServer,
 }: {
   isServer: boolean;
-}): RuleSetRule {
+}): SwcOptions => {
   return {
-    loader: require.resolve('swc-loader'),
-    options: {
-      jsc: {
-        parser: {
-          syntax: 'typescript',
-          tsx: true,
-        },
-        transform: {
-          react: {
-            runtime: 'automatic',
-          },
-        },
-        target: 'es2017',
+    env: {
+      targets: getBrowserslistQueries({isServer}),
+    },
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: true,
       },
-      module: {
-        type: isServer ? 'commonjs' : 'es6',
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
       },
     },
   };
+};
+
+export const rspack = Rspack;
+
+export function getSwcHtmlMinifier(): typeof swcHtmlMinifier {
+  return swcHtmlMinifier;
 }
 
 // Note: these options are similar to what we use in core
@@ -68,7 +65,15 @@ export function getSwcJsMinimizerOptions(): JsMinifyOptions {
 
 // We need this because of Rspack built-in LightningCSS integration
 // See https://github.com/orgs/browserslist/discussions/846
-export function getBrowserslistQueries(): string[] {
+export function getBrowserslistQueries({
+  isServer,
+}: {
+  isServer: boolean;
+}): string[] {
+  if (isServer) {
+    return [`node ${process.versions.node}`];
+  }
+
   const queries = browserslist.loadConfig({path: process.cwd()}) ?? [
     ...browserslist.defaults,
   ];