feat: warn used dep in devDependencies under bundeless mode

Author: fi3ework

packages/core/src/config.ts

@@ -1391,6 +1391,7 @@ const composeBundlelessExternalConfig = (
   cssModulesAuto: CssLoaderOptionsAuto,
   bundle: boolean,
   outBase: string | null,
+  pkgJson?: PkgJson,
 ): {
   config: EnvironmentConfig;
   resolvedJsRedirect?: DeepRequired<JsRedirect>;
@@ -1405,6 +1406,60 @@ const composeBundlelessExternalConfig = (
   const assetRedirectExtension = redirect.asset?.extension ?? true;
 
   let resolver: RspackResolver | undefined;
+  const devDependencyNames = new Set(
+    Object.keys(pkgJson?.devDependencies ?? {}),
+  );
+  const warnedDevDependencies = new Set<string>();
+
+  const devDependencyList = Array.from(devDependencyNames);
+
+  const matchDevDependency = (request: string): string | undefined => {
+    if (!request || devDependencyList.length === 0) {
+      return undefined;
+    }
+
+    for (const name of devDependencyList) {
+      if (request === name || request.startsWith(`${name}/`)) {
+        return name;
+      }
+    }
+
+    return undefined;
+  };
+
+  const warnDevDependency = (request: string, issuer?: string) => {
+    const matched = matchDevDependency(request);
+    if (!matched || warnedDevDependencies.has(matched)) {
+      return;
+    }
+
+    // Only warn when we have an issuer and outBase is a string and the issuer
+    // is located inside the outBase (root) directory. Otherwise skip warning.
+    if (!issuer || typeof outBase !== 'string') {
+      return;
+    }
+
+    const normalizedIssuer = normalizeSlash(issuer);
+    const normalizedOutBase = normalizeSlash(outBase);
+    const isIssuerInsideOutBase =
+      normalizedIssuer === normalizedOutBase ||
+      normalizedIssuer.startsWith(`${normalizedOutBase}/`);
+
+    if (!isIssuerInsideOutBase) {
+      return;
+    }
+
+    warnedDevDependencies.add(matched);
+
+    const relativeSource = normalizeSlash(path.relative(outBase, issuer));
+    const sourceInfo = relativeSource
+      ? ` from ${color.green(relativeSource)}`
+      : '';
+
+    logger.warn(
+      `The externalized request ${color.green(`"${request}"`)}${sourceInfo} is declared in ${color.blue('"devDependencies"')} in package.json. Bundleless mode does not include devDependencies in the output, consider moving it to ${color.blue('"dependencies"')} or ${color.blue('"peerDependencies"')}.`,
+    );
+  };
 
   return {
     resolvedJsRedirect: {
@@ -1478,6 +1533,7 @@ const composeBundlelessExternalConfig = (
             // Prevent from externalizing entry modules here.
             if (issuer) {
               let resolvedRequest: string = request;
+              warnDevDependency(request, issuer);
 
               const redirectedPath = await redirectPath(resolvedRequest);
               const cssExternal = await cssExternalHandler(
@@ -1491,6 +1547,7 @@ const composeBundlelessExternalConfig = (
                 issuer,
               );
 
+
               if (cssExternal !== false) {
                 return cssExternal;
               }
@@ -1561,6 +1618,8 @@ const composeBundlelessExternalConfig = (
               return;
             }
 
+            warnDevDependency(request);
+
             callback();
           },
         ] as Rspack.ExternalItem[],
@@ -1778,6 +1837,7 @@ async function composeLibRsbuildConfig(
     cssModulesAuto,
     bundle,
     outBase,
+    pkgJson,
   );
   const {
     config: targetConfig,

tests/integration/externals/dev-dependency-warning/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "bundleless-dev-dependency-warning",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "devDependencies": {
+    "left-pad": "1.0.0",
+    "normalize.css": "8.0.1"
+  }
+}

tests/integration/externals/dev-dependency-warning/rslib.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@rslib/core';
+import { generateBundleEsmConfig } from 'test-helper';
+
+export default defineConfig({
+  lib: [
+    generateBundleEsmConfig({
+      bundle: false,
+      source: {
+        entry: {
+          index: 'src/index.ts',
+        },
+      },
+      output: {
+        distPath: 'dist',
+      },
+    }),
+  ],
+});

tests/integration/externals/dev-dependency-warning/src/index.ts

@@ -0,0 +1,6 @@
+import leftPad from 'left-pad';
+import leftPadLib from 'left-pad/lib';
+import 'normalize.css';
+
+export const primary = leftPad('foo', 5, ' ');
+export const secondary = leftPadLib;

tests/integration/externals/index.test.ts

@@ -112,3 +112,24 @@ test('user externals', async () => {
     "
   `);
 });
+
+test('warn when bundleless external depends on devDependencies', async () => {
+  const fixturePath = join(__dirname, 'dev-dependency-warning');
+  const { logs, restore } = proxyConsole();
+
+  await buildAndGetResults({ fixturePath });
+
+  restore();
+  const warnLogs = logs.map((log) => stripAnsi(String(log)));
+  console.log(warnLogs);
+  const jsMatchingLog = warnLogs.filter(
+    (log) =>
+      log.includes('The externalized request "left-pad/lib" from index.ts is declared in "devDependencies" in package.json. Bundleless mode does not include devDependencies in the output, consider moving it to "dependencies" or "peerDependencies".')
+  );
+  expect(jsMatchingLog.length).toBe(1);
+  const cssMatchingLog = warnLogs.filter(
+    (log) =>
+      log.includes('The externalized request "normalize.css" from index.ts is declared in "devDependencies" in package.json. Bundleless mode does not include devDependencies in the output, consider moving it to "dependencies" or "peerDependencies".')
+  );
+  expect(cssMatchingLog.length).toBe(1);
+});