[React] Fix Compilation Error (#1428)

* regenerate yarn.lock * update changelog * refactor imports * Update CHANGELOG.md Co-authored-by: Adam Brauer <[email protected]> * rename function Co-authored-by: Adam Brauer <[email protected]> * updated function name --------- Co-authored-by: Adam Brauer <[email protected]>
Sitecore · Apr 13, 2023 · 8b732ce · 8b732ce
1 parent b065500
commit 8b732ce
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ Our versioning strategy is as follows:
 ### 🐛 Bug Fixes
 
 * `[sitecore-jss-nextjs]` Fix for Link component which throws error if field is undefined ([#1425](https://github.com/Sitecore/jss/pull/1425))
+* `[templates/react]` Fix compilation error when developing react template in monorepo ([#1428](https://github.com/Sitecore/jss/pull/1428))
 
 ## 21.1.0
 

diff --git a/packages/create-sitecore-jss/scripts/watch-templates.ts b/packages/create-sitecore-jss/scripts/watch-templates.ts
@@ -1,8 +1,11 @@
+import { execSync, exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs';
+import path from 'path';
 import chalk from 'chalk';
 import chokidar from 'chokidar';
-import path from 'path';
+
 import { initRunner } from '../src/init-runner';
-const execSync = require('child_process').execSync;
 
 chokidar
   .watch(path.join(process.cwd(), '.\\src\\templates'), { ignoreInitial: true })
@@ -40,6 +43,35 @@ function restoreLockfile() {
   }
 }
 
+/**
+ * Removes and then regenerates the yarn.lock file in order to resolve conflicting dependencies for react template.
+ */
+async function regenerateLockFile() {
+  const yarnLockPath = path.join(__dirname, '..', '..', '..', 'yarn.lock');
+  const rootPath = path.join(__dirname, '..', '..', '..');
+
+  console.log(chalk.yellow('Wait until yarn.lock is regenerated...'));
+
+  try {
+    // Remove yarn.lock
+    fs.unlink(yarnLockPath, (err) => {
+      if (err) {
+        console.error(err);
+        return;
+      }
+
+      console.log(chalk.red('yarn.lock was removed.'));
+    });
+
+    // Re-install dependencies
+    await promisify(exec)('yarn install', { cwd: rootPath });
+    // Dependencies installed successfully
+    console.log(chalk.green('yarn.lock generated successfully.'));
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 const initializeApps = async (noInstall: boolean) => {
   let watch;
   try {
@@ -49,6 +81,9 @@ const initializeApps = async (noInstall: boolean) => {
     if (watch.args.restoreLockfile) {
       restoreLockfile();
     }
+    if (initializers.includes('react')) {
+      await regenerateLockFile();
+    }
   } catch (error) {
     console.log(chalk.red('An error occurred: ', error));
     if (!watch) {