From 3e03fd24faf81a5f48e236af889207d15670ce68 Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Mon, 4 Mar 2024 12:23:29 +0200
Subject: [PATCH 1/6] [Next.js] Exclude ComponentProps functions from the
 client bundle

---
 .../src/templates/nextjs/package.json         |  2 +
 .../lib/next-config/component-props.loader.js | 50 +++++++++++++++++++
 .../next-config/plugins/component-props.js    | 27 ++++++++++
 3 files changed, 79 insertions(+)
 create mode 100644 packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js
 create mode 100644 packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
index 45f57753a8..5ba5655fa6 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/package.json
+++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -34,6 +34,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/parser": "^7.24.0",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/plugin-helpers": "^5.0.1",
@@ -63,6 +64,7 @@
     "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
+    "recast": "^0.23.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
     "typescript": "~4.9.4",
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js
new file mode 100644
index 0000000000..a1476add09
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js
@@ -0,0 +1,50 @@
+const recast = require('recast');
+
+/**
+ * Webpack loader to strip functions from the source code
+ * @param {string} source file source code
+ * @returns {string} output file source code with stripped functions
+ */
+module.exports = function (source) {
+  // Parse the source code into an AST (Abstract Syntax Tree)
+  const ast = recast.parse(source, {
+    parser: require('recast/parsers/babel-ts'),
+  });
+
+  // List of functions to strip from the AST
+  const functionsToStrip = ['getServerSideProps', 'getStaticProps'];
+
+  function traverseAst(path) {
+    if (path.node.declaration.declarations) {
+      path.node.declaration.declarations.forEach((declaration) => {
+        // Check if the function is in the list of functions to strip
+        if (functionsToStrip.includes(declaration.id.name)) {
+          // Strip the function from the AST
+          path.prune();
+
+          // Remove the function from the list of functions to strip
+          functionsToStrip.splice(functionsToStrip.indexOf(declaration.id.name), 1);
+        }
+      });
+    }
+
+    if (functionsToStrip.length === 0) {
+      // We have pruned all the functions we need to, so we can stop traversing the AST
+      return false;
+    }
+
+    // Continue traversing the AST
+    this.traverse(path);
+  }
+
+  // Traverse the AST and strip the functions
+  recast.visit(ast, {
+    // Visit the export named declaration
+    visitExportNamedDeclaration: traverseAst,
+  });
+
+  // Generate the output code
+  const output = recast.print(ast).code;
+
+  return output;
+};
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
new file mode 100644
index 0000000000..57b4e5e542
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
@@ -0,0 +1,27 @@
+const path = require('path');
+
+/**
+ * @param {import('next').NextConfig} nextConfig
+ */
+const componentPropsPlugin = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack: (config, options) => {
+      if (!options.isServer) {
+        // Add a loader to strip out getServerSideProps and getStaticProps from components in the client bundle
+        config.module.rules.unshift({
+          test: /src\\components\\.*\.tsx$/,
+          use: [path.resolve(process.cwd(), 'src/lib/next-config/component-props.loader.js')],
+        });
+      }
+
+      // Overload the Webpack config if it was already overloaded
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+
+      return config;
+    },
+  });
+};
+
+module.exports = componentPropsPlugin;

From a9552305626ec95a0f74f71136e7f07c9cfa91de Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Mon, 4 Mar 2024 12:26:40 +0200
Subject: [PATCH 2/6] Updated CHANGELOG

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04eb954ddf..3ed266483b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,12 @@ Our versioning strategy is as follows:
 * Upgrade to Node.js 20.x ([#1679](https://github.com/Sitecore/jss/pull/1679))([#1681](https://github.com/Sitecore/jss/pull/1681))
 * `[nextjs/template]` Upgrade graphql-codegen packages to latest ([#1711](https://github.com/Sitecore/jss/pull/1711))
 
+## 21.6.4
+
+### 🐛 Bug Fixes
+
+* `[templates/nextjs]` Exclude ComponentProps functions from the client bundle ([#1753](https://github.com/Sitecore/jss/pull/1753))
+
 ## 21.6.3
 
 ### 🐛 Bug Fixes

From b7145eb089807b9bc346b7cc54deba7b12f33a5b Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Tue, 5 Mar 2024 12:30:06 +0200
Subject: [PATCH 3/6] Update

---
 .../src/templates/nextjs/package.json         |  2 -
 .../lib/next-config/component-props.loader.js | 50 ------------
 .../next-config/plugins/component-props.js    |  5 +-
 packages/sitecore-jss-dev-tools/package.json  |  2 +
 .../nextjs/component-props.loader.test.ts     | 60 +++++++++++++++
 .../nextjs/component-props.loader.ts          | 77 +++++++++++++++++++
 .../src/templating/nextjs/index.ts            |  1 +
 7 files changed, 142 insertions(+), 55 deletions(-)
 delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js
 create mode 100644 packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.test.ts
 create mode 100644 packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
index 5ba5655fa6..45f57753a8 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/package.json
+++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -34,7 +34,6 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.24.0",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/plugin-helpers": "^5.0.1",
@@ -64,7 +63,6 @@
     "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
-    "recast": "^0.23.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
     "typescript": "~4.9.4",
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js
deleted file mode 100644
index a1476add09..0000000000
--- a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const recast = require('recast');
-
-/**
- * Webpack loader to strip functions from the source code
- * @param {string} source file source code
- * @returns {string} output file source code with stripped functions
- */
-module.exports = function (source) {
-  // Parse the source code into an AST (Abstract Syntax Tree)
-  const ast = recast.parse(source, {
-    parser: require('recast/parsers/babel-ts'),
-  });
-
-  // List of functions to strip from the AST
-  const functionsToStrip = ['getServerSideProps', 'getStaticProps'];
-
-  function traverseAst(path) {
-    if (path.node.declaration.declarations) {
-      path.node.declaration.declarations.forEach((declaration) => {
-        // Check if the function is in the list of functions to strip
-        if (functionsToStrip.includes(declaration.id.name)) {
-          // Strip the function from the AST
-          path.prune();
-
-          // Remove the function from the list of functions to strip
-          functionsToStrip.splice(functionsToStrip.indexOf(declaration.id.name), 1);
-        }
-      });
-    }
-
-    if (functionsToStrip.length === 0) {
-      // We have pruned all the functions we need to, so we can stop traversing the AST
-      return false;
-    }
-
-    // Continue traversing the AST
-    this.traverse(path);
-  }
-
-  // Traverse the AST and strip the functions
-  recast.visit(ast, {
-    // Visit the export named declaration
-    visitExportNamedDeclaration: traverseAst,
-  });
-
-  // Generate the output code
-  const output = recast.print(ast).code;
-
-  return output;
-};
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
index 57b4e5e542..6215b86dba 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
+++ b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
@@ -1,16 +1,15 @@
-const path = require('path');
-
 /**
  * @param {import('next').NextConfig} nextConfig
  */
 const componentPropsPlugin = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     webpack: (config, options) => {
+      
       if (!options.isServer) {
         // Add a loader to strip out getServerSideProps and getStaticProps from components in the client bundle
         config.module.rules.unshift({
           test: /src\\components\\.*\.tsx$/,
-          use: [path.resolve(process.cwd(), 'src/lib/next-config/component-props.loader.js')],
+          use: ['@sitecore-jss\\sitecore-jss-dev-tools\\dist\\cjs\\templating\\nextjs\\component-props.loader.js'],
         });
       }
 
diff --git a/packages/sitecore-jss-dev-tools/package.json b/packages/sitecore-jss-dev-tools/package.json
index 995badc2d9..e53b1236c2 100644
--- a/packages/sitecore-jss-dev-tools/package.json
+++ b/packages/sitecore-jss-dev-tools/package.json
@@ -32,6 +32,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "dependencies": {
+    "@babel/parser": "^7.24.0",
     "@sitecore-jss/sitecore-jss": "21.7.0-canary.76",
     "axios": "^1.3.2",
     "chalk": "^4.1.2",
@@ -47,6 +48,7 @@
     "jszip": "^3.10.1",
     "module-alias": "^2.2.2",
     "readline-sync": "^1.4.10",
+    "recast": "^0.23.5",
     "resolve": "^1.22.1",
     "ts-node": "^10.9.1",
     "url-join": "^4.0.1",
diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.test.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.test.ts
new file mode 100644
index 0000000000..772c7569ab
--- /dev/null
+++ b/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.test.ts
@@ -0,0 +1,60 @@
+import loader from './component-props.loader';
+import { expect } from 'chai';
+
+describe('component-props.loader', () => {
+  it('should strip exported function expressions from the source code', () => {
+    const source = `import { foo } from 'module';
+
+console.log('Hello, world!');
+
+export const getServerSideProps = async () => {
+  return {
+    props: { test: true },
+  };
+}
+
+export const getStaticProps = async () => {
+  return {
+    props: { test: true },
+  };
+}`;
+
+    const expected = `import { foo } from 'module';
+
+console.log('Hello, world!');`;
+
+    const result = loader(source).replace(/\r\n/g, '\n');
+
+    expect(result).to.deep.equal(expected);
+  });
+
+  it('should strip exported function declarations from the source code', () => {
+    const source = `import { foo } from 'module';
+
+console.log('Hello, world!');
+
+export async function getServerSideProps() {
+  return {
+    props: { test: true },
+  };
+}
+
+export async function getStaticProps() {
+  return {
+    props: { test: true },
+  };
+}`;
+
+    const expected = `import { foo } from 'module';
+
+console.log('Hello, world!');
+
+export {};
+
+export {};`;
+
+    const result = loader(source).replace(/\r\n/g, '\n');
+
+    expect(result).to.deep.equal(expected);
+  });
+});
diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts
new file mode 100644
index 0000000000..87600b9a03
--- /dev/null
+++ b/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts
@@ -0,0 +1,77 @@
+import * as recast from 'recast';
+
+type VariableDeclaration = recast.types.namedTypes.VariableDeclaration;
+
+/**
+ * Webpack loader to strip functions from the source code
+ * Strips the `getServerSideProps` and `getStaticProps` functions from the source code
+ * @param {string} source file source code
+ * @returns {string} output file source code with stripped functions
+ */
+export default function componentPropsLoader(source: string) {
+  // Parse the source code into an AST (Abstract Syntax Tree)
+  const ast = recast.parse(source, {
+    parser: require('recast/parsers/babel-ts'),
+  });
+
+  // List of functions to strip from the AST
+  const functionsToStrip = ['getServerSideProps', 'getStaticProps'];
+
+  // Traverse the AST and strip the functions
+  recast.visit(ast, {
+    // Visit the named export function expression
+    visitExportNamedDeclaration: function(path): boolean | void {
+      // Get the variable declaration from the AST
+      (path.node.declaration as VariableDeclaration)?.declarations?.forEach((declaration) => {
+        // Check if the function is in the list of functions to strip
+        if (
+          'id' in declaration &&
+          'name' in declaration.id &&
+          typeof declaration.id.name === 'string' &&
+          functionsToStrip.includes(declaration.id.name)
+        ) {
+          // Strip the function from the AST
+          path.prune();
+
+          // Remove the function from the list of functions to strip
+          functionsToStrip.splice(functionsToStrip.indexOf(declaration.id.name), 1);
+        }
+      });
+
+      if (functionsToStrip.length === 0) {
+        // We have pruned all the functions we need to, so we can stop traversing the AST
+        return false;
+      }
+
+      // Continue traversing the AST
+      this.traverse(path);
+    },
+    // Visit the named export function declaration
+    visitFunctionDeclaration: function(path): boolean | void {
+      // Check if the function is in the list of functions to strip
+      if (
+        path.node.id &&
+        'name' in path.node.id &&
+        typeof path.node.id.name === 'string' &&
+        functionsToStrip.includes(path.node.id.name)
+      ) {
+        // Remove the function from the list of functions to strip
+        functionsToStrip.splice(functionsToStrip.indexOf(path.node.id.name), 1);
+
+        // Strip the function from the AST
+        path.prune();
+      }
+
+      if (functionsToStrip.length === 0) {
+        // We have pruned all the functions we need to, so we can stop traversing the AST
+        return false;
+      }
+
+      // Continue traversing the AST
+      this.traverse(path);
+    },
+  });
+
+  // Generate the output code
+  return recast.print(ast).code;
+}
diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts
index a70685c434..a6afb49b9b 100644
--- a/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts
+++ b/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts
@@ -1,2 +1,3 @@
 export { generateComponentBuilder } from './generate-component-builder';
 export { getComponentBuilderTemplate } from './templates/component-builder';
+export { default as componentPropsLoader } from './component-props.loader';

From 2a0d40a9eb68356e13bb7928c51f544497eec3c4 Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Tue, 5 Mar 2024 12:30:50 +0200
Subject: [PATCH 4/6] Updated yarn.lock

---
 yarn.lock | 44 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fe77469fa3..9875db55d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -792,6 +792,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/parser@npm:7.24.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 4a6afec49487a212e7a27345b0c090b56905efb62c0b3a1499b0a57a5b3bf43d9d1e99e31b137080eacc24dee659a29699740d0a6289999117c0d8c5a04bd68f
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.5, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
@@ -5425,6 +5434,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sitecore-jss/sitecore-jss-dev-tools@workspace:packages/sitecore-jss-dev-tools"
   dependencies:
+    "@babel/parser": ^7.24.0
     "@sitecore-jss/sitecore-jss": 21.7.0-canary.76
     "@types/chai": ^4.3.4
     "@types/chokidar": ^2.1.3
@@ -5463,6 +5473,7 @@ __metadata:
     nock: ^13.3.0
     nyc: ^15.1.0
     readline-sync: ^1.4.10
+    recast: ^0.23.5
     resolve: ^1.22.1
     sinon: ^15.0.1
     ts-node: ^10.9.1
@@ -8505,6 +8516,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-types@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
+  dependencies:
+    tslib: ^2.0.1
+  checksum: 21c186da9fdb1d8087b1b7dabbc4059f91aa5a1e593a9776b4393cc1eaa857e741b2dda678d20e34b16727b78fef3ab59cf8f0c75ed1ba649c78fe194e5c114b
+  languageName: node
+  linkType: hard
+
 "astral-regex@npm:^1.0.0":
   version: 1.0.0
   resolution: "astral-regex@npm:1.0.0"
@@ -13226,7 +13246,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.0, esprima@npm:^4.0.1":
+"esprima@npm:^4.0.0, esprima@npm:^4.0.1, esprima@npm:~4.0.0":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
   bin:
@@ -22464,6 +22484,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recast@npm:^0.23.5":
+  version: 0.23.5
+  resolution: "recast@npm:0.23.5"
+  dependencies:
+    ast-types: ^0.16.1
+    esprima: ~4.0.0
+    source-map: ~0.6.1
+    tiny-invariant: ^1.3.3
+    tslib: ^2.0.1
+  checksum: 1b9d71f3166ab4a116c1b551059f1c9ae22f38568c0393635e31642f05b52bdec6cdab98a6fc3fe4bb995055a620bcbbf931a1a82c362e39669b77b55252649a
+  languageName: node
+  linkType: hard
+
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -24806,6 +24839,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-invariant@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "tiny-invariant@npm:1.3.3"
+  checksum: 5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe
+  languageName: node
+  linkType: hard
+
 "tmp@npm:^0.0.33":
   version: 0.0.33
   resolution: "tmp@npm:0.0.33"
@@ -25145,7 +25185,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.5.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad

From a21c8f2a548fed6a95a569ce9531f935ec2b2316 Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Tue, 5 Mar 2024 16:36:56 +0200
Subject: [PATCH 5/6] Added a submodule

---
 .../nextjs/src/lib/next-config/plugins/component-props.js      | 2 +-
 .../sitecore-jss-dev-tools/nextjs-component-props-loader.d.ts  | 1 +
 .../sitecore-jss-dev-tools/nextjs-component-props-loader.js    | 3 +++
 packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts | 1 -
 packages/sitecore-jss-dev-tools/tsconfig-esm.json              | 3 ++-
 packages/sitecore-jss-dev-tools/tsconfig.json                  | 3 ++-
 6 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 packages/sitecore-jss-dev-tools/nextjs-component-props-loader.d.ts
 create mode 100644 packages/sitecore-jss-dev-tools/nextjs-component-props-loader.js

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
index 6215b86dba..fc5063648f 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
+++ b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js
@@ -9,7 +9,7 @@ const componentPropsPlugin = (nextConfig = {}) => {
         // Add a loader to strip out getServerSideProps and getStaticProps from components in the client bundle
         config.module.rules.unshift({
           test: /src\\components\\.*\.tsx$/,
-          use: ['@sitecore-jss\\sitecore-jss-dev-tools\\dist\\cjs\\templating\\nextjs\\component-props.loader.js'],
+          use: ['@sitecore-jss\\sitecore-jss-dev-tools\\nextjs-component-props-loader'],
         });
       }
 
diff --git a/packages/sitecore-jss-dev-tools/nextjs-component-props-loader.d.ts b/packages/sitecore-jss-dev-tools/nextjs-component-props-loader.d.ts
new file mode 100644
index 0000000000..cb2672d2c6
--- /dev/null
+++ b/packages/sitecore-jss-dev-tools/nextjs-component-props-loader.d.ts
@@ -0,0 +1 @@
+export * from './types/templating/nextjs/component-props.loader';
diff --git a/packages/sitecore-jss-dev-tools/nextjs-component-props-loader.js b/packages/sitecore-jss-dev-tools/nextjs-component-props-loader.js
new file mode 100644
index 0000000000..cea7501036
--- /dev/null
+++ b/packages/sitecore-jss-dev-tools/nextjs-component-props-loader.js
@@ -0,0 +1,3 @@
+const loader = require('./dist/cjs/templating/nextjs/component-props.loader');
+
+module.exports = loader;
diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts
index a6afb49b9b..a70685c434 100644
--- a/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts
+++ b/packages/sitecore-jss-dev-tools/src/templating/nextjs/index.ts
@@ -1,3 +1,2 @@
 export { generateComponentBuilder } from './generate-component-builder';
 export { getComponentBuilderTemplate } from './templates/component-builder';
-export { default as componentPropsLoader } from './component-props.loader';
diff --git a/packages/sitecore-jss-dev-tools/tsconfig-esm.json b/packages/sitecore-jss-dev-tools/tsconfig-esm.json
index b2e1c0d5a7..d98277ca15 100644
--- a/packages/sitecore-jss-dev-tools/tsconfig-esm.json
+++ b/packages/sitecore-jss-dev-tools/tsconfig-esm.json
@@ -12,6 +12,7 @@
     "node_modules",
     "src/**/*.test.ts",
     "react.d.ts",
-    "nextjs.d.ts"
+    "nextjs.d.ts",
+    "nextjs-component-props-loader.d.ts",
   ]
 }
diff --git a/packages/sitecore-jss-dev-tools/tsconfig.json b/packages/sitecore-jss-dev-tools/tsconfig.json
index 6d3eeaf784..407b94da7e 100644
--- a/packages/sitecore-jss-dev-tools/tsconfig.json
+++ b/packages/sitecore-jss-dev-tools/tsconfig.json
@@ -14,6 +14,7 @@
     "src/test",
     "src/**/*.test.ts",
     "react.d.ts",
-    "nextjs.d.ts"
+    "nextjs.d.ts",
+    "nextjs-component-props-loader.d.ts",
   ]
 }

From 36010f4cc21011ce0340a0feed0d135bf0004dad Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Wed, 6 Mar 2024 10:15:23 +0200
Subject: [PATCH 6/6] Extracted common function

---
 .../templating/nextjs/component-props.loader.ts    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts
index 87600b9a03..8710ba71d4 100644
--- a/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts
+++ b/packages/sitecore-jss-dev-tools/src/templating/nextjs/component-props.loader.ts
@@ -17,6 +17,12 @@ export default function componentPropsLoader(source: string) {
   // List of functions to strip from the AST
   const functionsToStrip = ['getServerSideProps', 'getStaticProps'];
 
+  // Remove the function from the list of functions to strip
+  const updateList = (functionName: string) => {
+    // Remove the function from the list of functions to strip
+    functionsToStrip.splice(functionsToStrip.indexOf(functionName), 1);
+  };
+
   // Traverse the AST and strip the functions
   recast.visit(ast, {
     // Visit the named export function expression
@@ -30,11 +36,10 @@ export default function componentPropsLoader(source: string) {
           typeof declaration.id.name === 'string' &&
           functionsToStrip.includes(declaration.id.name)
         ) {
+          updateList(declaration.id.name);
+
           // Strip the function from the AST
           path.prune();
-
-          // Remove the function from the list of functions to strip
-          functionsToStrip.splice(functionsToStrip.indexOf(declaration.id.name), 1);
         }
       });
 
@@ -55,8 +60,7 @@ export default function componentPropsLoader(source: string) {
         typeof path.node.id.name === 'string' &&
         functionsToStrip.includes(path.node.id.name)
       ) {
-        // Remove the function from the list of functions to strip
-        functionsToStrip.splice(functionsToStrip.indexOf(path.node.id.name), 1);
+        updateList(path.node.id.name);
 
         // Strip the function from the AST
         path.prune();