From b7bd431211612c13534701a790e6383bb12d7c9e Mon Sep 17 00:00:00 2001
From: Katari <kataricoder@gmail.com>
Date: Fri, 6 Mar 2026 00:50:29 +0530
Subject: [PATCH 1/4] docs: fix inconsistent ESM and CommonJS syntax Related to
 #7772 (#7865)

---
 src/content/concepts/index.mdx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
index 4aea28086841..0c557a1d9514 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -54,7 +54,7 @@ By default its value is `./src/index.js`, but you can specify a different (or mu
 **webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   entry: "./path/to/my/entry/file.js",
 };
 ```
@@ -70,9 +70,13 @@ You can configure this part of the process by specifying an `output` field in yo
 **webpack.config.js**
 
 ```javascript
-const path = require("node:path");
+import path from "node:path";
 
-module.exports = {
+// For compatibility with older Node.js versions
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
   entry: "./path/to/my/entry/file.js",
   output: {
     path: path.resolve(__dirname, "dist"),
@@ -99,9 +103,9 @@ At a high level, **loaders** have two properties in your webpack configuration:
 **webpack.config.js**
 
 ```javascript
-const path = require("node:path");
+import path from "node:path";
 
-module.exports = {
+export default {
   output: {
     filename: "my-first-webpack.bundle.js",
   },
@@ -127,15 +131,15 @@ While loaders are used to transform certain types of modules, plugins can be lev
 
 T> Check out the [plugin interface](/api/plugins) and how to use it to extend webpack's capabilities.
 
-In order to use a plugin, you need to `require()` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with the `new` operator.
+In order to use a plugin, you need to `import` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you need to create an instance of it by calling it with the `new` operator.
 
 **webpack.config.js**
 
 ```javascript
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const webpack = require("webpack"); // to access built-in plugins
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import webpack from "webpack"; // to access built-in plugins
 
-module.exports = {
+export default {
   module: {
     rules: [{ test: /\.txt$/, use: "raw-loader" }],
   },
@@ -154,7 +158,7 @@ Using plugins in your webpack configuration is straightforward. However, there a
 By setting the `mode` parameter to either `development`, `production` or `none`, you can enable webpack's built-in optimizations that correspond to each environment. The default value is `production`.
 
 ```javascript
-module.exports = {
+export default {
   mode: "production",
 };
 ```

From 5d45a7c944df68e88f7f88bae0ded7731c65dc69 Mon Sep 17 00:00:00 2001
From: Katari <kataricoder@gmail.com>
Date: Fri, 6 Mar 2026 01:11:27 +0530
Subject: [PATCH 2/4] chore: trigger CI


From 41b3565789428c12541c1c38b041f65575e4bfd7 Mon Sep 17 00:00:00 2001
From: Katari <kataricoder@gmail.com>
Date: Fri, 6 Mar 2026 01:11:58 +0530
Subject: [PATCH 3/4] chore: trigger CI


From c5c35a14775f1f3af5991dbca8d30d691b75b78f Mon Sep 17 00:00:00 2001
From: Katari <kataricoder@gmail.com>
Date: Fri, 6 Mar 2026 12:31:54 +0530
Subject: [PATCH 4/4] cypress e2e test update

---
 cypress/e2e/code-block-with-copy.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/code-block-with-copy.cy.js b/cypress/e2e/code-block-with-copy.cy.js
index e9d49b8f8cd1..004b457f7692 100644
--- a/cypress/e2e/code-block-with-copy.cy.js
+++ b/cypress/e2e/code-block-with-copy.cy.js
@@ -82,7 +82,7 @@ describe("CodeBlockWithCopy", () => {
 
       cy.get("@expectedCopiedText").then((expectedCopiedText) => {
         expect(copiedText).to.eq(expectedCopiedText);
-        expect(copiedText).to.include("module.exports = {");
+        expect(copiedText).to.include("export default {");
         expect(copiedText).to.include('entry: "./path/to/my/entry/file.js",');
       });
     });