From b73303223568441ef8bcbb341f47c285e3cc4597 Mon Sep 17 00:00:00 2001
From: Andrey Vyazovoy <andrew.vyazovoy@gmail.com>
Date: Thu, 5 Mar 2026 17:00:24 -0500
Subject: [PATCH] fix: handle null module.layer in renderContentAsset

Webpack's Module base class defaults `layer` to `null` when
`experiments.layers` is enabled and no explicit layer is assigned.

The existing check `typeof module.layer !== "undefined"` incorrectly
evaluates to `true` for `null` (since `typeof null` is `"object"`),
causing a crash when accessing `module.layer.length`.

Replace the check with `typeof module.layer === "string"` which
correctly handles both `null` and `undefined` while being more
precise about the expected type.
---
 src/index.js                                  |  6 +++---
 .../expected/main.css                         |  4 ++++
 .../simple-with-experiments-layers/index.js   |  1 +
 .../simple-with-experiments-layers/style.css  |  3 +++
 .../webpack.config.js                         | 21 +++++++++++++++++++
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 test/cases/simple-with-experiments-layers/expected/main.css
 create mode 100644 test/cases/simple-with-experiments-layers/index.js
 create mode 100644 test/cases/simple-with-experiments-layers/style.css
 create mode 100644 test/cases/simple-with-experiments-layers/webpack.config.js

diff --git a/src/index.js b/src/index.js
index 30cef78b..0cbda58c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1537,11 +1537,11 @@ class MiniCssExtractPlugin {
         if (
           module.media ||
           module.supports ||
-          typeof module.layer !== "undefined"
+          typeof module.layer === "string"
         ) {
           let atImportExtra = "";
 
-          const needLayer = typeof module.layer !== "undefined";
+          const needLayer = typeof module.layer === "string";
 
           if (needLayer) {
             atImportExtra +=
@@ -1577,7 +1577,7 @@ class MiniCssExtractPlugin {
           source.add(`@media ${module.media} {\n`);
         }
 
-        const needLayer = typeof module.layer !== "undefined";
+        const needLayer = typeof module.layer === "string";
 
         if (needLayer) {
           source.add(
diff --git a/test/cases/simple-with-experiments-layers/expected/main.css b/test/cases/simple-with-experiments-layers/expected/main.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/simple-with-experiments-layers/expected/main.css
@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+
diff --git a/test/cases/simple-with-experiments-layers/index.js b/test/cases/simple-with-experiments-layers/index.js
new file mode 100644
index 00000000..4fe51c72
--- /dev/null
+++ b/test/cases/simple-with-experiments-layers/index.js
@@ -0,0 +1 @@
+import "./style.css";
diff --git a/test/cases/simple-with-experiments-layers/style.css b/test/cases/simple-with-experiments-layers/style.css
new file mode 100644
index 00000000..67ce83e4
--- /dev/null
+++ b/test/cases/simple-with-experiments-layers/style.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/test/cases/simple-with-experiments-layers/webpack.config.js b/test/cases/simple-with-experiments-layers/webpack.config.js
new file mode 100644
index 00000000..1d3869c4
--- /dev/null
+++ b/test/cases/simple-with-experiments-layers/webpack.config.js
@@ -0,0 +1,21 @@
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.js",
+  experiments: {
+    layers: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};